Javascript jquery:onclick更改背景色

我有以下UL-LIHTML

<UL>
<LI><span id='select1'>Text</span></LI>
<LI><span id='select2'>Text</span></LI>
<LI><span id='select3'>Text</span></LI>
<LI><span id='select4'>Text</span></LI>
<LI><span id='select5'>Text</span></LI>
<LI><span id='select6'>Text</span></LI>
</UL>

文本
文本
文本
文本
文本
文本

如果我点击特定的

，它的背景颜色应该改变。i、 e.如果我点击span have

id='select3'

，它的背景色应该改变

---

如何使用jQuery实现这一点？

您可以使用以下方法

jQuery("#select1").click(function(){jQuery(this).css({'background-color':'red})});

希望能有帮助

更新我的答案以在每个选择上放置处理程序。您可以向span元素添加一些属性来表示颜色。e、 g.

文本

。 然后您可以编写如下的处理程序

jQuery("ul span[id^='select']").click(function(){jQuery(this).css({'background-color':jQuery(this).attr('rel')})});

试一试

---

如果您有许多列表元素，您可能希望使用事件委派，只管理单击

ul

。所以你可以

$('ul').click(function(event) {
    switch($(event.target).attr('id')) {
        case select1:
            $(event.target).css('background-color', 'red');
            break;
        //More case statements
    }
});

试试这个：

$('li span[id^="select"]').click(function(){
   $(this).css('background-color',"#ccc")
})

---

它所做的是，在

li

中单击

span

，让id以“select”开头，更改背景颜色。

将单击处理程序附加到更改背景颜色的范围。你到底需要知道什么？您尝试过什么？可能有一种方法可以将if语句组合到选择器中，但我不太喜欢jquery。css方法中不仅没有select元素，而且：should。这只会将click处理程序添加到第一个元素。将其转换为应用于多个元素应该很容易，但您应该提到它。是的，

s的#no将是动态的。那我该怎么办？

$('li span[id^="select"]').click(function(){
   $(this).css('background-color',"#ccc")
})