使用類名來動態設置id

我需要在點擊事件時爲元素設置一個ID，它應該和一個類具有相同的名稱。例如，當我點擊class =「x」的元素時，我想爲此元素設置id =「x」。使用類名來動態設置id

我試圖做到這一點與下面的代碼，但它不工作

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

當我改變$（this）來指定元素（$（例如「X」）），它工作，但我希望該點擊事件與任何點擊元素一起工作。

來源

2016-08-16 Roman

元素ID必須在文檔中是唯一的。你的代碼表明你正試圖將相同的id應用到多個元素。 – Phylogenesis

該初始選擇器中的第一個'this'是指什麼？你在運行這個代碼的時候有什麼更大的內容？ – David

我可以問爲什麼你需要這樣做？是否有一些相關性能夠稍後趕上id的東西？如果你在頁面上有10個class'x'的元素，用lonut回答的計數器設置ID是最好的方法。 – lharby

您的代碼應該是這樣的：

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總是需要有所不同。您不能擁有相同的兩個或更多ID。它與使用它們的整個概念混淆。

來源

2016-08-16 12:59:14 Ionut

我打賭你的初始$(this)不是你實際想要點擊的東西。如果您想要監聽頁面上的每一次點擊然後進行測試，請將偵聽器附加到文檔並測試事件目標。

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

來源

2016-08-16 13:00:11 Brian

而不是$（'some-selector'），我想要處理任何點擊的元素的事件 – Roman

@Roman我更新了我的答案 – Brian

我不知道理解，但我認爲，聽者必須在一個正確的選擇，嘗試用：

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

來源

2016-08-16 13:02:21

而不是將監聽器附加到頁面上的每個元素，您應該聽點擊「文檔」和然後測試'e.target'：'$（document）.click（function（e）{console.log（e.target）;}）' – Brian

而不是$（'*'），我想處理任何事件點擊元素 – Roman

您可以在很短的形式做

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

來源

2016-08-16 13:05:15

使用類名來動態設置id

回答

相關問題