使用span標籤來改變DIV的背景色的onclick

Question

我有以下的html代碼：

<div id="parent" style="background-color:#FFFFFF"> 
    <ul>  
     <li><span data-color="red">Text 1</span></li> 
     <li><span data-color="blue">Text 2</span></li> 
     <li><span data-color="yellow">Text 3</span></li> 
    </ul> 
    </div> 

如果我點擊具體<span>，股利父母的背景顏色應該改變。

這是如何使用jQuery完成的？

我已經試過這樣：

$('ul li span').click(function(){ 
    $('.parent').css('background-color', $(this).data-color); 
}); 

Answer 1

使用香草的JavaScript（無庫）：

//We attach a click handler on the nearest common parent. 
//This allows us to have only one event handler, which is better 
//For performance! 
document.getElementById("parent").onclick = function(e) { 
    //We only want events on the spans, so let's check that! 
    if (e.target.tagName.toLowerCase() == "span") { 
     this.style.backgroundColor = "#BADA55"; 
     //This is for the sake of example only! 
     //TODO: A better approach would be to add a class 
     //And define a CSS rule for that class. 
    } 
}; 

或者不通訊已廢除

document.getElementById("parent").onclick = function(e) { 
    if (e.target.tagname.toLowerCase() == "span") { 
     this.style.backgroundColor = "#BADA55"; 
    } 
}; 

以上的等效使用jQuery：

$("#parent").on("span", "click", function() { 
    $("#parent").css({backgroundColor: "#BADA55"}); 
}); 

Example

Answer 2

$('ul li span').on('click',function(){ 
    $(this).closest('div').css('background-color',$(this).data('color')); 
}) 

<div id="parent" style="background-color:#FFFFFF"> 
<ul>  
    <li><span data-color='red'>Text 1</span></li> 
    <li><span data-color='yellow'>Text 2</span></li> 
    <li><span data-color='green'>Text 3</span></li> 
</ul> 

這裏是演示http://jsfiddle.net/k6t80zsg/3/