javascript - 如何在 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>

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

您的解决方案如下所示:

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

有了这个，在你的最终标记中，每个列表项将有两个类——一个共享的“collection-item”类，和一个像这样的数值:

<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 的功能，而不是内联定义类。