使用类名来动态设置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”）），它工作，但我希望该点击事件与任何点击元素一起工作。

元素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。它与使用它们的整个概念混淆。

答

我打赌你的初始$(this)不是你实际想要点击的东西。如果您想要监听页面上的每一次点击然后进行测试，请将侦听器附加到文档并测试事件目标。

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

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

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

答

我不知道理解，但我认为，听者必须在一个正确的选择，尝试用：

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

而不是将监听器附加到页面上的每个元素，您应该听点击“文档”和然后测试'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 
});

使用类名来动态设置id

相关推荐