Question

我遵循UL - LI html。

<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>

如果我点击特定<span>，则应更改其背景颜色。即如果我点击具有id='select3'的跨度，则应更改其背景颜色。

如何使用jQuery完成此操作？

Answer 1

试试这个：

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

它的作用是，点击ID为“select”的span内li会改变背景颜色。

Answer 2

您可以使用以下

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

希望它有所帮助。

更新我的答案，将处理程序放在每个选择上。您可以在span元素中添加一些attr来表示颜色。例如<span rel="red">Text</span>。然后你可以编写像

这样的处理程序

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

Answer 3

尝试

$("span").click(function(){
  if($(this).attr('id') == "select3") $(this).css('background-color', 'red');
});

Answer 4

如果您有许多列表元素，您可能希望使用事件委派，只管理ul上的点击。所以你可以做到

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

jquery：onclick更改背景颜色

4 个答案: