1

おそらく私はこれを間違って/非効率的に行っていますが、これは私にとってはうまくいきません：

$(document).ready(function(){

    $('li.taglink').click(function(){
        alert('clicked tag');
        $userClicked = $(this).html();
        $('#holder').children('div').each(function () { 
            $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                                       
            $x = $(this).attr("tags");
            ele = $x.split(',');
            for (var i = 0; i < ele.length; i++) 
            {
            if ($userClicked == ele[i]) {$(this).show(495); break;} 
                                    else {$(this).hide(495);}   
            }
        });
        $(this).removeClass('taglink').addClass('taglinkcurrent');
    });

    $('li.taglinkcurrent').click(function(){
        alert('clicked current');
        $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                               
        $('li.taglink').show(495);
    });

});

このページには、いくつかのタグを含む「tags」属性を持つdivが含まれています。また、順序付けされていないリストがあり、各li要素に個々のタグが含まれています。ユーザーがli要素の1つをクリックすると、そのタグを持つすべてのdivが表示され、それ以外はすべて非表示になります。ユーザーが同じli要素をクリックすると、すべてがもう一度表示されます。何が起こっているかをテストするためにアラートを追加しました。リンクをクリックするたびに、liのクラスが.taglinkcurrentに切り替えられていても、「クリックされたリンク」がポップアップ表示されます。私が間違ったことについて何か考えはありますか？

4

2 に答える 2

2

click()コードを最初に実行したときにイベントにバインドしているので、"taglink"クラスだけが機能します。

domの変更に応じて関数を変更するには、on()代わりに次のメソッドを使用します。

http://api.jquery.com/on/

$(document).on("click", "li.taglink", function() { 
  // ... 
});

ただし、この方法には多くの注意点がありますon()。詳細については、上記のドキュメントを参照してください。

編集：推奨される方法であるv1.7から「live」を「on」に変更しました。

于 2012-05-20T20:55:10.720 に答える
1

イベントはロード時の各liに起因し、その後のクラス変更はイベントのバインドを解除しないと思います。しかし、これはこの方法で簡単に修正できると思います：

$('li').click(function() {
    if ( $(this).hasClass("taglink") ) {
        alert("clicked tag");
        ...
    } else if ( $(this).hasClass("taglinkcurrent") ) {
        alert('clicked current');
        ...
    }
});
于 2012-05-20T20:59:25.577 に答える