在jquery中动态控制逻辑

Question

我必须使用jquery动态地向HTML页面添加元素，并为此设置一些事件处理程序。我正在使用此代码：

$('.orderedList').append("<li class='il l' + i>" + $('.nam').val() + "</li>");

我想为列表项分配两个类，一个将设置CSS属性，另一个类（l5，如果i = 5）将控制该列表项的单击侦听器。

我的问题是没有设置第二个类（'l' + i）。也许我的代码中有一些错误。有什么建议吗？

Answer 1

假设i是一个javascript变量，您需要将其更改为：

$('.orderedList').append("<li class='il l" + i + "'>" + $('.nam').val() + "</li>");

注意构造html字符串的方式

Answer 2

您的字符串被错误引用，因此不会根据需要进行连接。试试这个：

$('.orderedList').append('<li class="il l' + i + '">' + $('.nam').val() + '</li>');

我建议您使用具有语法突出显示功能的文本编辑器来编写JS代码。发现并修复这样的问题变得微不足道。

您还可以通过将元素创建为对象来实现上述目的，从而避免过多的字符串连接。

$('<li />', {
    class: 'il l' + i,
    text: $('.nam').val()
}).appendTo('.orderedList');