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

JQuery:

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

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

我认为您使用的代码太多了！

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

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

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

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());
    });
});

演示：Fiddle

Answer 5

$("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。