クラス名を使用してIDを動的に設定する

Question

clickイベントでIDにIDを設定する必要があります。クラスと同じ名前にする必要があります。 たとえば、class = "x"の要素をクリックすると、この要素にid = "x"を設定します。

私は、次のコードを使用していることを実行しようとしましたが、私は（たとえば$（ 'X'））指定された要素に$（this）を変更すると、それは

$(this).click(function() { 
     if($(this).hasClass('x')){ 
      $(this).attr('id', 'x'); 
      console.log($(this).attr('id')); 
     } 
    }); 

動作しない、それはありませんクリックイベントは、クリックされたすべての要素で動作します。

Answer 1

あなたのコードは次のようにする必要があります：

var count = 0; //added a count to have unique ids 
    $('.x').on('click', function(){ 
      count++; 
      if($(this).hasClass('x')){ 
       $(this).attr('id', 'x_' + count); 
      } 
    }); 

Idsが常に異なるものにする必要があります。あなたは同じ2つ以上のIDを持つことはできません。それはそれらを使うという全体のコンセプトで駄目です。

Answer 2

私が最初に賭けるのは$(this)で、あなたが実際にクリックしようとしているものではありません。ページのすべてのクリックをリッスンしてテストする場合は、リスナーをドキュメントに添付して、イベントターゲットをテストします。

$(document).click(function (e) { 
    var $target = $(e.target); 
    if ($target.hasClass('x')) { 
     $target.attr('id', 'x'); 
     console.log($target.attr('id')); 
    } 
}); 

Answer 3

は、私が理解することはよく分からないが、私は、リスナーが正しい選択でなければならないことだと思う、と試してみてください。

$('*').click(function() { 
    if($(this).hasClass('x')){ 
     $(this).attr('id', 'x'); 
     console.log($(this).attr('id')); 
    } 
}); 

Answer 4

はあなたが短い形式で行うことができます

$(document).on('click', '.x', function() {$(this).attr('id', 'x');}); 

IDの目的は、ページ内の任意のドーム要素の識別です。は、それを上書きするか、別の要素

に同じ値を与えるのはよくないですだから私は、データ-id属性を使用することをお勧め代わりにIDの

$(document).on('click', '.x', function() { 
    $(this).attr('data-id', 'x'); 
    console.log($(this).data('id', 'x')); //for retrieve data-id 
});