Невозможно изменить цвет фона выбранного элемента li в UL

Question

Невозможно изменить цвет фона выбранного элемента li в UL

0

Мне нужна ваша помощь,

Как изменить фон (используя jQuery) выбранного элемента LI в моем списке UL. Как сейчас, единственное, что меняется, это весь фон моего списка. Последнее, что нужно отметить, это то, что цвет должен быть по умолчанию белым, если будет выбран новый элемент 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>

user1451890 31 март 2014, в 18:55

Источник

0

Присоедините обработчик события click к элементам списка, а не к родительскому элементу div. that.addClass('selected') всегда будет добавлять класс в родительский div, как он есть сейчас.
j08691 31 март 2014, в 16:53

Теги:

javascript

jquery

html-lists

2 ответа

0

Здесь вам не нужен .closest() так как #list1 .closest() является предком вашего li:

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

Но на самом деле, я думаю, что вы пытаетесь добавить .active щелкнуть li и удалить этот active класс из другого li, если это так, то вы можете сделать:

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

Демо-версия скрипта

Felix 31 март 2014, в 14:42

Ещё вопросы

Присоедините обработчик события click к элементам списка, а не к родительскому элементу div. that.addClass('selected') всегда будет добавлять класс в родительский div, как он есть сейчас.

jmar777 · Accepted Answer · 2014-03-31T14-57-00.000Z

Попробуй это:

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

Нет никаких оснований для выбора новых элементов для этой задачи. Просто создайте коллекцию всех элементов списка ($items) и повторно используйте ее для удаления selected класса из предыдущего элемента.