-1

この Web サイトCSS Toggleのトグル スイッチがページの 1 つにあり、トグルのように select2 ボックスを表示および非表示にしようとしています。

したがって、Document Ready では、必要がないため、セカンダリ ボックスを非表示にしてから、トグル スイッチのロジックを非表示にします。

$( "#s2id_author-search" ).hide();
$( "#searchSwitch_btn" ).click(function(){
    if($("#s2id_author-search").css('display') === 'none') {
        console.log("Showing author search: 1");
        $("#s2id_author-search").show();
        console.log("Hiding title search: 2");
        $("#s2id_title-search").hide();
    }
    else {
        $("#s2id_author-search").hide();
        console.log("Hiding author search: 3");
        $("#s2id_title-search").show();
        console.log("Showing title search: 4");
    }
});

FireBug コンソールを見ながらトグル スイッチをクリックすると、すべての console.log メッセージが表示されます。これは、スクリプトが 1 つまたは他のオプションだけではなく、完全に実行されていることを示しています。

PS jQueryでtoggle()コマンドを使用する方が効率的であることは知っていますが、これがトラブルシューティング用のコードです。

何か案は？

4

4 に答える 4

0

よしみんな、やっと整理できた。トグル自体のコードは次のとおりです。

       <label class="checkbox toggle candy blue" style="width: 150px;" id="searchSwitch_btn">
            <input type="checkbox" id="searchSwitch" checked="true" />
            <p>
                Search by
                <span class="switchBtn">Title</span>
                <span class="switchBtn">Author</span>
            </p>
            <a class="slide-button"></a>
        </label>

最初の投稿では、クリック イベントをラベル自体にバインドしていました。これは、おそらくブートストラップと Symfony のおかげで、クリックされたときにペアになっているフィールドにフォーカスするように設計されています。したがって、「swichBtn」クラスを両方のスパンに追加し、それをクリック イベント バインダー要素として使用するだけで、コードは正しく機能するようになりました。ご意見をお寄せいただきありがとうございます。

于 2013-08-26T21:53:31.170 に答える
0

以下から条件を変更します。

    if($("#s2id_author-search").css('display') === 'none'){

に：

    if($("#s2id_author-search").is(':visible')){
于 2013-08-26T17:35:54.790 に答える