Question

我有一个清单。我通过ajax在其中添加数据。我想更改所选列表项的背景。这是我的清单

 <div class="widget-content" >
                <ul class="news-items" id='jq_friendList'>
                </ul>
            </div>

我正在使用ajax添加列表列表项，如此

function getFriends()
{
    var lines = '<img src="img/loader.gif" height="45" width="45" />';

    document.getElementById('jq_friendList').innerHTML=lines;

   var strURL="./MainActivity.php";
   var req = new XMLHttpRequest();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {          
         var myDiVElem = document.getElementById('jq_friendList');
                myDiVElem.innerHTML="";
        myDiVElem.innerHTML=req.responseText;
     } else {

     }
       }
      }
   req.open("GET", strURL, true);
   req.send();
   }    
}

我使用jquery来改变这样的选定背景，但这改变了整个ul背景。

<script type="application/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="application/javascript">
$("#jq_friendList").live('click',function()
{
    $(this).css("background-color", "blue");
});
</script>

Answer 1

要突出显示所选的列表项，请尝试

$("#jq_friendList").on('click','li',function() {
 $(this).css("background-color", "blue");
});

其他答案似乎突出了整个<ul>

<强>更新

要重置以前突出显示的项目，请使用css类

.highlight{
background:blue;
}

并尝试

$("#jq_friendList").on('click','li',function() {
 $('.highlight').removeClass('highlight');
 $(this).addClass('highlight');
});

Answer 2

在 jquery 1.7 ：

之前这样做

$("#jq_friendList li").live('click',function()
{
    $(this).css("background-color", "blue");
});

以上 jquery 1.7 ：

$("#jq_friendList").on('click','li',function()
    {
        $(this).css("background-color", "blue");
    });

请参阅DEMO HERE

Answer 3

使用.on()

$("#jq_friendList").on('click','li',function() {
    $(this).parent().find('li').css("background-color", "");
    $(this).css("background-color", "blue");
});

演示：http://jsfiddle.net/dwcUQ/1/

Answer 4

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。

$("#jq_friendList li").on('click',function()
{
    $("#jq_friendList li").css("background-color", "red") // other li color provided instead of red 
    $(this).css("background-color", "blue"); // active li

});

Answer 5

您可以使用 event delegation 来使用 .on() ，因为您的元素已动态添加到DOM中：

$("body").on('click','#jq_friendList',function() {
    $(this).css("background-color", "blue");
});

Answer 6

在jquery 1.7+中不推荐使用

.live()。改为使用.on()：

$(".news-items").on('click',function()
{
    $(this).css("background-color", "blue");
});

使用jquery更改列表的背景颜色

6 个答案: