jquery - 太多点击 jQuery

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));
});

或者有趣的方式（不推荐），如果你有无限数量（无论出于何种原因，不想添加另一个类）：

[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 + "'); });");
}