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

Question

我知道之前已经有类似标题的问题被问过，并且我看到了答案。

我在HTML中有一个ul元素：

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

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

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

现在，对于每个li元素，我想添加一个数字到它的class属性中，以唯一标识每个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的值是正确的，它来自另一个文件，并且不会引起任何问题。

- ssharma

---

HTML中没有“collection-item”，它是通过JS动态添加到HTML中的。 - ssharma

这是什么意思：list[i].username？ - Furhan S.

这是一个内部代码，它是 Django 的变量。如果我添加了该代码的代码，那么代码将会变得冗长，因为我还要添加 views.py（一个 Django 文件）的内容。 - ssharma

如果我包含了它，我本应该因未提供精确信息而得到-1分，但现在情况仍然是一样的:/。 - ssharma

Answer 1

使用这个替代

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

你的代码中存在语法错误，请使用上面的代码。

要使hover生效，请按照以下步骤进行操作

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

- sphinx

---

谢谢回答，但是它不起作用。悬停事件没有被触发。 - ssharma

Answer 2

据我所见，您在该字符串中放置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);

这样，在您的最终标记中，每个列表项都将具有两个类 - 一个共享的“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的功能中获得更多收益，而不是在线定义类。

- slackOverflow

---

谢谢您的回答。我已经进行了更改并上传了它：https://github.com/Sharma96/dropdownlist，但是仍然无法运行hover事件。我已经上传了整个JS文件和一个HTML片段以更清晰地展示代码。 - ssharma

你有很多代码需要查看，但标记之间似乎仍然没有空格在'collection-item'和'j'之间，导致它们融合成一个类名。然后你使用“collection-item.j”作为选择器，这意味着它们是两个单独的类。className应该编译为“collection-itemj”，这样每个元素都将通过唯一的类名“collection-item1”进行选择，或者你可以使用两个类名“collection-item j”，这样你就可以使用“collection-item.j”。 - slackOverflow

如果您想按照Sphinx的方式进行操作，则不能在选择器中加入点号。$("a.b")将选择所有具有CSS类a和b的元素，而$("ab")将选择所有具有单个CSS类"ab"的元素。我建议使用两个类，这样您就可以使用简单的jQuery将事物应用于所有"collection-items"。 - slackOverflow

我尝试了使用空格，但现在的问题是所有li元素都获得了最后一个元素的id，所以我需要通过“this”对象添加，而不是$('.collection-item.'+j).attr("id",list[i].username)。你能指定如何通过这个对象访问collection-item吗？因为“this”指的是“collection”。 - ssharma

其实我没有想到那个，你可以把它放回循环中，就像最初的样子，并使用(".collection-item."j)在循环内引用它们，而我则寻找更好的解决方案。在我的jsfiddle中https://jsfiddle.net/0wqeouxo/1/ $(this)确实在选择器中起作用，但这可能是"click"和"on"之间的区别。 - slackOverflow

让我们在聊天中继续这个讨论。 - slackOverflow

Answer 3

由于jQuery是异步操作的，因此在尝试设置id时，元素可能尚未在dom中。你可以在添加元素之前设置id，例如：

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

- itacode

Answer 4

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

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

- prasanth

---

谢谢回答，但是它不起作用。悬停事件没有被触发。我认为我的悬停事件也是正确的，但是追加数字到类后面的代码没有起作用。 - ssharma