Question

我有代码：

    $(".click1").click(function() {
  $('.input').attr('name', 'name1');
});
$(".click2").click(function() {
  $('.input').attr('name', 'name2');
});
$(".click3").click(function() {
  $('.input').attr('name', 'name3');
});
$(".click4").click(function() {
  $('.input').attr('name', 'name4');
});
$(".click5").click(function() {
  $('.input').attr('name', 'name5');
});

怎么写？如何将其更改为简短版本？

Answer 1

HTML：

 <a class="clickable" href="..." rel="1">...</a>
    <a class="clickable" href="..." rel="2">...</a>
    ....

JS：

 $('.clickable').click(function(){
      var _id = $(this).attr('rel');
      $('.input').attr('name', 'name' + _id);
 });

Answer 2

像这样：

这可以帮助人:)

说明：从你的班级拿走最后一个角色并将其搞砸。

<强>代码

$(".click1,.click2,.click3").click(function() {

    var num = $(this).attr('class');
    //get the number at the end of the class of this particular div           
    var lastChar = num.substr(num.length - 1)

    $('.input').attr('name', 'name'+lastChar);
});

Answer 3

$(".click1, .click2, .click3, .click4, .click5").click(function() {
  $('.input').attr('name', 'name' + this.className.slice(-1));
});

或者有趣的方式（不推荐），如果您的号码不受限制（无论出于何种原因，不想add another class）：

[1, 2, 3, 4, 5].forEach(function(e) {
    var f = '$(".click' + e + '").click(function() {';
    f += '$(".input").attr("name", "name' + e + '");';
    f += '});';
    new Function(f).call();
});

Answer 4

为什么不这样！

所有组件的公共类都说“可点击”并使用简单的if条件

$('.clickable').click(function(){

  if this object has 'click1' class { // do something }
  if this object has 'click2' class { // do something }
  if this object has 'click3' class { // do something }

});

Answer 5

javascript提供了eval()功能。这是未经测试的，但它应该是这样的：

for(var i = 1; i <= 5; i++){
    eval("$(\".click" + i +
        "\").click(function() {$('.input').attr('name', 'name" +
        i + "'); });");
}

点击jQuery太多了

5 个答案: