Question

我目前有一个带有默认减号的div，当我点击它时，它会变为加号，但当我再次点击加号时，它不会切换回减号。如何更改我的javascript，以便它根据点击在类之间切换？

$(document).on('click', '.header', function (event) {
    $(this).nextUntil(".header").toggle();
    document.getElementById("toggleIcon").className = "icon-plus";
});

默认为 icon-minus ，当我点击它时，它会变为 icon-plus ，当我再次点击它时，它会切换回图标-minus 但它并没有这样做。

HTML

<div class="accordion-group" data-bind="foreach: Types">
    <div class="text_x-large header"> 
         <span data-bind="text:Name()"></span> 
         <span id="toggleIcon" class="icon-minus"></span>
    </div>
    <div data-bind="foreach: Users">
        <!-- ko if: Letter -->
        <div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
        <!-- /ko -->
        <div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
    </div>
</div>

Answer 1

使用toggleClass根据需要切换类名：

$(document).on('click', '.header', function (event) {
    $(this).nextUntil(".header").toggle();
    $("#toggleIcon").toggleClass("icon-plus icon-minus");
});

当我点击第二个或第三个div时，我有多个div它只会更改第一个div的图标

在这种情况下，您不应该使用id来选择它。将toggleIcon更改为class，然后使用它。

$(".toggleIcon", $(this)).toggleClass("icon-plus icon-minus");

Answer 2

这样它应该有效：

$(document).on('click', '.header', function (event) {
    $(this).nextUntil(".header").toggle();
    if($(this).nextUntil(".header").is(':visible'))
        document.getElementById("toggleIcon").className = "icon-minus";
    else 
        document.getElementById("toggleIcon").className = "icon-plus";
});

您忘记在打开div时设置图标减号

Answer 3

我会使用以下行：

$("#toggleIcon").toggleClass("icon-minus");

.toggleClass（）将添加该类（如果它不存在），如果是，则将其删除。您可以在此处阅读完整文档：http://api.jquery.com/toggleClass/

该图标的默认样式应为加号，一旦添加了icon-minus，图像应该会更改。这样，您就不需要使用更多行代码来添加/删除第二个类。

css类没有根据click事件正确切换

3 个答案: