Question

我需要在click事件上为元素设置ID，它应该与类同名。例如，当我点击带有class =＆＃34; x＆＃34;的元素时，我想设置id =＆＃34; x＆＃34;这个元素。

我尝试使用以下代码执行此操作，但它无法正常工作

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

当我将$（this）更改为指定的元素（例如$（＆＃39; .x＆＃39;））时，它确实有效，但我希望点击事件能够与任何点击的元素一起使用。

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总是需要与众不同。您不能拥有相同的两个或更多ID。它与使用它们的整个概念混淆。

Answer 2

你可以做简短的表格

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

ID的用途是页面中任何圆顶元素的唯一标识。因此覆盖它或为不同的元素赋予相同的值是不好的

所以我建议使用data-id属性而不是id

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

Answer 3

我认为您的初始$(this)并不是您实际想要点击的内容。如果您想要收听页面上的每次点击，然后对其进行测试，请将听众附加到文档并测试事件目标。

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

Answer 4

我不确定理解，但我认为听众必须在正确的选择器上，请尝试：

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

使用类名动态设置id

4 个答案: