如何在 HTML 标签的属性中设置 JavaScript 变量

Question

我知道以前有人问过类似标题的问题，并且我看到了答案。

我在 HTML 中有一个 ul 元素：

<ul class="collection with-header"></ul>

在这个元素中li元素是通过JavaScript动态添加的：

$('.collection').append('<li class="collection-item">'+'Hello'+'</li>');

现在，对于每个 li 元素，我想在其类属性中添加一个数字来唯一标识每个 li 元素，以便我可以分配不同的 id 属性给他们。为此我写道：

var j = 1;
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

当我尝试通过悬停事件获取 li 元素的 id 时：

$('.collection-item').hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );

Undefined 打印在控制台中。

这个实现有什么问题？

编辑： list[i].username 的值工作正常，它的值来自另一个文件，不会造成任何问题。

Answer 1

据我所知，您在该字符串中放置 i 会导致 i 在 html className 属性之外，实际上根本不在任何 html 属性中。你的代码：

$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');

将产生这个最终标记：

<li class = "collection-item"0>Hello</li>
<li class = "collection-item"1>Hello</li>

零在 HTML 中没有任何意义，而且不合适。

@sphinx 的评论是正确答案，但它“没有被解雇”，因为他的代码导致每个列表项都有一个唯一的类名，其编号在末尾，如下所示：

<li class = ".collection-item0">Hello</li>
<li class = ".collection-item1">Hello</li>

当您添加悬停动作时，您通过类“.collection-item”选择这些元素，而不是唯一的类。

您的解决方案如下所示：

$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>');
$('.collection-item.'+j).attr("id",list[i].username);

这样，在您的最终标记中，每个列表项将有两个类 - 一个共享的“集合项”类和一个像这样的数值：

<li class="collection-item 0"></li>
<li class="collection-item 1"></li>

现在您可以使用选择器 $(".collection-item.4") 通过两个类选择每个列表项（在此示例中为列表项 4），并使用选择器 $(".collection-item") 将操作应用于所有集合项。

我发现这段代码看起来有些难看，如果它是我的，我不确定我自己是否会对它的结构感到满意，但这里有一个 jsfiddle 作为概念证明： https://jsfiddle.net/0wqeouxo/（点击每个列表项，它会提醒它的id）

我认为您可以在该循环中从 jquery 的功能中获得更多好处，而不是内联定义类。

Answer 2

改用这个

var j = 1;
$('.collection').append('<li class="collection-item'+j+'">'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;

您的代码有语法错误，请使用上面的代码。

要使悬停起作用，请执行此操作

$('.collection-item'+j).hover(
        function(){
        var idd = $(this).attr('id');
        console.log(idd);
        }
 );

Answer 3

由于 jQuery 是异步操作的，当您尝试设置 id 时，该元素可能还没有在 dom 中。您可以在附加元素之前设置 id，例如：

$('<li class="collection-item '+j+'">'+ 'Hello'+'</li>')
  .attr("id",list[i].username)
  .appendTo('.collection');

Answer 4

它是一个动态附加元素。所以你可以使用on().并像这样更改选择器。[class^="collection-item"]它将匹配包含在类中的其他名称的相同类名元素

$(document).on('hover' ,'li[class^="collection-item"]',function(){
        var idd = $(this).attr('id');
        console.log(idd);
        });