Question

我目前有这个jquery代码

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

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

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

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

Answer 1

使用multiple selector或给这些元素一个公共类（如果你有更多的元素，那就更好）：

$('#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

我们可以这样做。

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

Answer 5

有多种方式，如果你有很多#fx divs，那么这是另一种方式：

var prefix = "f";

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

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

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

Answer 6

假设您不想使用某个课程（正如其他人所说的那样）将您的功能与您的点击作业分开。

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

最小化jquery代码

6 个答案: