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

时间:2013-10-30 14:07:47

标签: javascript jquery

我目前有一个带有默认减号的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>

3 个答案:

答案 0 :(得分:6)

使用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");

答案 1 :(得分: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时设置图标减号

答案 2 :(得分:0)

我会使用以下行:

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

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

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