jquery - jquery コードを最小限に抑える

Question

私は現在、このjqueryコードを持っています

$('#f1').click(function() {
$('#bg').addClass('f1');
});

$('#f2').click(function() {
$('#bg').addClass('f2');
});

$('#f3').click(function() {
$('#bg').addClass('f3');
});

問題は、私がやりたいことのためにこれを何度も書き出す必要があるということです。これをどのように短縮できるか疑問に思っていました

score 5 · Accepted Answer

複数のセレクターを使用するか、これらの要素に共通のクラスを指定します (さらに多くの要素がある場合はより適切です)。

$('#f1, #f2, #f3').click(function() { // $('.foo').click(...)
    $('#bg').addClass(this.id);
});

score 1 · Accepted Answer

それらにセレクターのクラスを与え、次に

$('.foo').click(function() {
  $('#bg').addClass(this.id);
});

score 1 · Accepted Answer

それらすべてにクラスを追加してから、次のようにします。

 $('.class').click(function() {
      $('#bg').addClass($(this).attr('id'));
 });

score 0 · Accepted Answer

このようにできますか。

 for(var i=1; i<=3;i++)
 {
    $('#f' + i).click(function() {
       $('#bg').addClass('f' + i);
    });
 }

score 0 · Accepted Answer

複数の方法があります。これらの#fxdivが多数ある場合は、別の方法があります。

var prefix = "f";

$("[id^="+prefix+"]").click(function() {
    $('#bg').addClass(this.id);
});

または、すべての要素が1つの「コンテナ」要素内にある場合：

$("#fContainer").children().click(function() {
    $('#bg').addClass(this.id);
});

score 0 · Accepted Answer

クラスを使用したくないと仮定すると（他の人が言ったように）、機能をクリック割り当てから分離します。

var clickHandler = function(){ 
   $('#bg').addClass(this.id); 
};
$('#f1, #f2, #f3').click(clickHandler);

jquery - jquery コードを最小限に抑える

6 に答える 6

Related

Reference