jqueryコードを最小化する - jquery

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

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

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

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

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

回答：

回答№1は5

使用 複数セレクタ それらの要素に共通のクラスを与えます（さらに多くの要素がある場合はより良い）。

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

---

回答№2の場合は1

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

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

---

回答№3の場合は1

それらのすべてにクラスを追加し、次に実行します。

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

---

回答№4の場合は0

私たちはこれを行うことができますか？

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

---

回答№5の場合は0

ここには#fx divの数が多い場合、別の方法があります。

var prefix = "f";

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

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

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

---

答え№6の場合は0

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

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

---