2

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

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

默认是icon-minus，当我单击它时，它会变为icon-plus，当我再次单击它时，它应该切换回icon-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>
4

3 回答 3

6

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

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

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

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

$(".toggleIcon", $(this)).toggleClass("icon-plus icon-minus");
于 2013-10-30T14:09:52.620 回答
1

这样它应该可以工作：

$(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 时忘记设置图标减号

于 2013-10-30T14:15:12.420 回答
0

我会使用以下行：

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

.toggleClass() 如果该类不存在则添加该类，如果存在则将其删除。你可以在这里阅读完整的文档：http: //api.jquery.com/toggleClass/

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

于 2013-10-30T14:12:20.703 回答