1

私のウェブサイトで使用している用語集があります。これは、いくつかの表示/非表示機能と .removeClass 属性を利用しています。

$(document).ready(function() {
    $("#glossary-container li").click(function() { 
        $(".glossary-content > div").hide();
        var id = $(this).attr("id").replace('-link', ''); 
        $('#' + id).show(); 

        $(".glossaryUL li").each(function() { 
            $(this).click(function() {
                $(".glossaryUL li").removeClass("selected");                       
                $(this).addClass("selected"); 
                elementClick = $(this).attr("id"); 
            });
        });
    }); 

    $('.coolbox').hide(); 

    $('.clicker').click(function(event){ 
        event.preventDefault(); 
        $($(this).attr('href')).toggle(300); 
    });
});

ページの読み込み時に、リスト アイテム文字「A」UL ラス「.glossaryUL」がインライン スタイルを介して「選択済み」として設定されます。

<li id="a-link" class="selected">A</li>

別の文字をクリックすると、クラス「.glossary-content」内の用語が表示されますが、.removeClass 属性は文字「A」からクラスを削除しません。

ただし、別の文字をクリックすると (ページ読み込み後の 2 回目のクリック)、.removeClass 属性が機能し、クラスが削除され、適切な文字に適用されます...

なぜこれを行っているのかわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

2

クリック イベントの割り当てを にラップする必要はありません。jQuery は、そのセレクターに一致するすべてeachの要素に対して既にclickイベントを割り当てています (クラスをセレクターとして使用したため)。重複したクリック イベントが競合していると思われます。代わりにこれを試してください：

$(".glossaryUL li").click(function() { 
        $(".glossaryUL li").removeClass("selected");                       
        $(this).addClass("selected"); 
        elementClick = $(this).attr("id"); 
    });
});
于 2013-01-29T21:41:23.377 に答える