单击地图自定义控件时获取特定的孩子

Question

我有一个div 和它的三个span children，当我在click 上div 时使用JQuery 然后使用下面的function 我能够识别出child 是@ 987654332@或clicked

$('.unitContainer').on('click','span',function(){
     $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    console.log($(this).text()); // "this" is the current element in the loop
    $(this).css('color','black'); // This line change attribute of targeted div
});

现在我想要这个事件，如果那个 div 将是 Map 上的自定义控件。

我试过了：

google.maps.event.addDomListener(unitControlDiv, 'click', function() {          
    $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    $(unitControlDiv).css('color','black');
});

还有这个：

 google.maps.event.addDomListener(unitControlDiv, 'click', function() {         
    $('.unitContainer').children('span').each(function () {
        $(this).css('color','white');
    });
    $(this).css('color','black');
});

但两者都不起作用。我现在怎么做才能让它发挥作用？

更新 1

1 : 默认控制 2：我的控件（自定义控件）（具有 3 个跨度的 Div）

更新 2

这个demo 使用JQuery 成为目标span

和

这个demo（地图上的div）没有工作。

Answer 1

鼠标事件目标的一种可能解决方案：

google.maps.event.addDomListener(unitControlDiv, 'click', function(evt) {

    $('.unitContainer').children('span').each(function () {
        $(this).css('color', 'white');
    });

    //$(this).css('color', 'black');
    evt.target.setAttribute('style', 'color: black');
});

例如at jsfiddle。

更新：属性的变化可以使用，例如：

var innerText = evt.target.innerText;
if (innerText == 'mi' || innerText == 'km' || innerText == 'ft') {
    evt.target.setAttribute('style', 'color: black');
}

Updated example.

Answer 2

Here 它是如何工作的。

var milesSpan = $('<span class="custom-button" id="mi">mi</span>');
var kmSpan = $('<span class="custom-button" id="km">km</span>');
var feetSpan = $('<span class="custom-button" id="feet">ft</span>');

var hi = function() {
    alert($(this).attr('id') + " clicked!");
};
milesSpan.click(hi);
kmSpan.click(hi);
feetSpan.click(hi);

只需将“hi”替换为您的代码，“this”指的是 span 对象；