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, .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 3

このような：

これは人を助けるはずです:)

説明: クラスの最後の文字を取り出して、それを入れます。

コード

$(".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 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 + "'); });");
}