jquery - JQuery：使用 .on('click') 在列表项上迭代 (.each()) 时无法删除类

Question

我正在使用 JQuery 遍历ul列表，并通过使用.on('click'...)我想将一个类添加到当前单击的对象li中，同时将其从先前选择的对象中删除li

jsFIDDLE 在这里：jsfiddle 链接

HTML：

<div id="divisionMenus">
    <ul>
        <li>Type 01</li>
        <li>Type 02</li>
        <li>Type 03</li>
        <li>Type 04</li>
    </ul>
</div>
<p class="results"></p>

CSS：

#divisionMenus {
    width: 220px;
    min-height: 220px;
    position: absolute;
    top: 30px;
    left: 5px;
    background-color: #003399;
}
#divisionMenus ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#divisionMenus ul li {
    padding: 18px;
    border-top: 3px solid #111;
    font-weight: bold;
    cursor: pointer;
}
#divisionMenus ul li:hover {
    background-color: #c0dde8;
    color: #111;
}
.currentType {
    background-color: #c0dde8;
    color: #111;
}
.results {
    display: none;
}

查询：

$(document).ready(function () {

    // select list items in list
    $devisionProductTypes = $('#divisionMenus').children().children();

    $devisionProductTypes.each(function (index) {

        $(this).on('click', $(this), function() {
            $productType = $(this);
            $productTypeTitle = $productType.text();
            $otherProductTypes = $productType.not($(this));

            if (!$productType.hasClass('currentType')) {
                $productType.addClass('currentType');
                $otherProductTypes.removeClass('currentType');

                $('.results').show('fast').text('You have selected ' + $productTypeTitle);
            } else {
                $productType.removeClass('currentType');
                $otherProductTypes.removeClass('currentType');
            }

        });

    });

});

我使用相同的逻辑来迭代一些div img以切换大小并且它在那里工作。但不是在这里。我是错过了什么，还是我接近这一切都错了。

Answer 1

我认为你过于复杂了，这听起来很简单：

$('#divisionMenus li').on('click', function() {

  var $this = $(this);
  $this.toggleClass('currentType').siblings().removeClass('currentType');

  if ($this.hasClass('currentType')) {
    $('.results').show('fast').text('You have selected ' + $this.text());
  } else {
    $('.results').hide();
  }

});

这是一个小提琴

Answer 2

$("li").click(function() {
//var $thisBtn = $(this);
if($("li").hasClass("btn-color")) {
    $("li").removeClass("btn-color");
    $(this).addClass("btn-color");
}
else {  
    $(this).addClass("btn-color");
}
});

请参阅此jsfiddle 相同的内容。

Answer 3

<div id="divisionMenus">
    <ul>
        <li class='class1'>Type 01</li>
        <li class='class1'>Type 02</li>
        <li class='class1'>Type 03</li>
        <li class='class1'>Type 04</li>
    </ul>
    </div>

$('#divisionMenus .class1').click(function(){
$('.class1').removeClass('className');
$(this).addClass('className');

});

Answer 4

尝试

$(document).ready(function() {
    // select list items in list
    var $devisionProductTypes = $('#divisionMenus').children().children();

    $devisionProductTypes.on('click', $(this), function() {
        var $this = $(this);
        $this.toggleClass('currentType').siblings('.currentType').removeClass('currentType');
        $('.results').show('fast').text('You have selected ' + $this.text());
    });

});

演示：小提琴

Answer 5

我认为您正在使用很多代码！

在这里我清理了一点你的代码：http: //jsfiddle.net/zxxza/

删除 currentClass。您可以只选择该类的每个元素，然后将其删除并将该类添加到单击的项目中。就像这样：

$('.currentType').removeClass('currentType');
$productType.addClass('currentType');