0

この jQuery のスニペット (以下) があり、要素ごとに個別の CSS セレクターを追加'.filter-name'します。

jQuery('.filter-name').each(function(i){
                jQuery(this).addClass('title'+(i+1));
            });

私の問題は、'clicked'各要素がクリックされるたびにクラスを起動する必要があることです。これは以下のコードで実行されます。動作しますが、コードではあまりエレガントに見えません。これを洗練する方法はありますか？

jQuery('.title1').click(function(){
            jQuery('.title1').toggleClass('clicked');
        });
        jQuery('.title2').click(function(){
            jQuery('.title2').toggleClass('clicked');
        });
        jQuery('.title3').click(function(){
            jQuery('.title3').toggleClass('clicked');
        });
        jQuery('.title4').click(function(){
            jQuery('.title4').toggleClass('clicked');
        });
        jQuery('.title5').click(function(){
            jQuery('.title5').toggleClass('clicked');
        });
        jQuery('.title6').click(function(){
            jQuery('.title6').toggleClass('clicked');
        });

私が試してみました ：

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
                jQuery('.title1, .title2, .title3, .title4, .title5, .title6').toggleClass('clicked');
            });

しかし、これはそれらすべてを同時に起動するだけであり、jQuery に実行させたいことではありません。

ps は jQuery を使用してin noConflict();いるため、jQuery セレクターです。

4

3 に答える 3

4

にクリックハンドラを追加するのはどうですか.filter-name、

jQuery('.filter-name').click(function () {
   //using this ensure that is toggling the correct element
   jQuery(this).toggleClass('clicked'); 
});
于 2013-09-27T13:11:51.543 に答える
1

あなたのソリューションは次のように機能します。

jQuery('.title1, .title2, .title3, .title4, .title5, .title6').click(function(){
            jQuery(this).toggleClass('clicked');
});

.titleコードを次のように減らすことができるので、すべてのタイトルにクラス名を付けることをお勧めします。

jQuery('.title').click(function(){
            jQuery(this).toggleClass('clicked');
});
于 2013-09-27T13:12:16.123 に答える
0

イベント処理を委任します。

jQuery(document.body).on('click', '.filter-name', function() {
    jQuery(this).toggleClass('clicked');
});

.filter-nameすべてのクラスを生成するために既に依存して.title#いるので、それを使用してイベント ハンドラーをアタッチします。

すべての要素document.bodyの最も低い共通の祖先に置き換える必要があります。.filter-name

于 2013-09-27T13:11:17.670 に答える