如何突出显示点击的div？

Question

我有一系列像这样的div：

<div id="listofstuff">
    <div id="anitem">
        <span class="itemname">Item1</h3></span>
        <span class="itemdescruption">AboutItem1</span>
    </div>
    <div id="anitem">
        <span class="itemname">Item2</h3></span>
        <span class="itemdescruption">AboutItem2</span>
    </div>
    <div id="anitem">
        <span class="itemname">Item3</h3></span>
        <span class="itemdescruption">AboutItem3</span>
    </div>
</div>

我想在用户点击“anitem”时这样做，点击的那个会突出显示，而itemname只会弹出一个警告框。

Answer 1

描述

首先，我必须说id's在您的文档中必须是唯一的，而是选择一个类。 然后，您可以使用jQuerys click()和css()方法更改内容。

  

id属性指定HTML元素的唯一ID（id属性值在HTML文档中必须是唯一的。）

查看我的示例和 jsFiddle Demonstration

示例

<div id="listofstuff">
<div class="anitem">
       <span class="itemname">Item1</h3></span>
       <span class="itemdescruption">AboutItem1</span>
</div>
<div class="anitem">
       <span class="itemname">Item2</h3></span>
       <span class="itemdescruption">AboutItem2</span>
</div>
<div class="anitem">
       <span class="itemname">Item3</h3></span>
       <span class="itemdescruption">AboutItem3</span>
</div>
</div>


$(".anitem").click(function() {
   $(this).css("backgroundColor", "red"); 
});

更多信息

• 的 jsFiddle Demonstration
• w3c - HTML id Attribute
• jQuery - .click()
• jQuery - .css()

Answer 2

首先 - 您有多个具有相同值的id参数 - 它是错误的.ID必须是唯一的。我把它改成了课。因此，不是<div id="anitem">而是<div class="anitem">

$(function() {
    $('.anitem').click(function() {
        $(this).css('background-color', '#d00');
        alert($(this).find('.itemname').html());
    })
})