获取特定的孩子，点击地图自定义控件

Question

我有一个div及其三个span children，JQuery click div function后使用child 1}}我能够确定哪个target是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 });

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

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

我试过了：

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

而且：

span

但两个都没有用。我现在要做些什么让它起作用？

更新1

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

更新2

此demo使用JQuery

定位{{1}}

和

此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对象;