無法更改UL中所選li項的背景顏色

Question

我需要你的幫助，

如何更改UL列表中所選LI項的背景（使用jQuery）。 現在，唯一要更改的是列表的整個背景。 最后要注意的一點是，如果選擇了新的LI項目，則顏色應默認為白色。

<!DOCTYPE html>

<html>
<script src="jquery.min.js"></script> 
<head>

<style type="text/css">
#container {
    width: 200px;
}
#list1 {
    border: 1px solid red;
    width: 100%;
}
#list1 ul {
    margin: 0;
    padding: 3px;
    list-style-type: none;
}
#list1 li {
    cursor: default;
}
.selected {
    background: blue;
}
</style>

<script type="text/javascript">
window.onload = function() {

$('#list1').click(function(){
  var that = $(this);
  that.closest('li').find('.selected').removeClass('selected');
  that.addClass('selected');
});

}
</script>

</head>

<body>

<div id="container">
    <div id="list1">
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Milk</li>
        </ul>
    </div>
</div>
</body>

</html>

Answer 1

您不需要這里的.closest() ，因為#list1是li的祖先：

that.find('li.selected').removeClass('selected');

但是實際上，我認為您要嘗試的是向單擊的li添加.active並從另一個li刪除此active類，如果是這種情況，則可以執行以下操作：

$('#list1 ul li').click(function () {
    $('#list1 ul li').removeClass('selected');
    $(this).addClass('selected');
});

小提琴演示

Answer 2

嘗試這個：

var $items = $('#list1 li').click(function() {
    $items.removeClass('selected');
    $(this).addClass('selected');
});

沒有理由繼續為此任務選擇新元素。 只需創建所有列表項（ $items)的集合，然后將其重用於從上一個項目中刪除selected類。

無法更改UL中所選li項的背景顏色

問題描述

2 個解決方案

解決方案1
0 2014-03-31 16:51:00

解決方案2
0 已采納 2014-03-31 16:54:06

無法更改UL中所選li項的背景顏色

問題描述

2 個解決方案

解決方案1 0 2014-03-31 16:51:00

解決方案2 0 已采納 2014-03-31 16:54:06

解決方案1
0 2014-03-31 16:51:00

解決方案2
0 已采納 2014-03-31 16:54:06