2

現在div、デフォルトのマイナス記号があり、それをクリックするとプラス記号に変わりますが、プラス記号をもう一度クリックしてもマイナス記号に戻りません。クリックに基づいてクラスを切り替えるように JavaScript を変更するにはどうすればよいですか?

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

デフォルトはアイコンマイナスで、クリックするとアイコンプラスに変わり、もう一度クリックするとアイコンマイナスに戻るはずですが、そうではありません。

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

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/

そのアイコンのデフォルト スタイルは plus である必要があり、icon-minus が追加されると、画像が変更されます。そうすれば、2 番目のクラスを追加/削除するために、より多くのコード行を使用する必要がなくなります。

于 2013-10-30T14:12:20.703 に答える