jquery - 最小化jquery代码

Question

我目前有这个 jquery 代码

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

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

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

问题是，对于我想做的事情，我需要写很多次，所以想知道如何缩短它

Answer 1

使用多重选择器或给这些元素一个公共类（如果你有更多元素会更好）：

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

Answer 2

给他们一个选择器类，然后

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

Answer 3

为所有这些添加一个类，然后执行以下操作：

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

Answer 4

假设您不想使用课程（正如其他人所说），请将您的功能与点击分配分开。

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

Answer 5

有多种方法，如果您有许多这样的#fx div，这里还有另一种方法：

var prefix = "f";

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

或者，如果您的所有元素都在一个“容器”元素中：

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

Answer 6

我们可以这样做吗。

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