Question

我正在制作购物清单应用。当一个项目被添加到文本输入时，它应该被转换为一个列表项目，其类别为＆＃34; tile＆＃34;并使用＆＃34; .shopping_item_list＆＃34;类添加到列表的开头。这是我的HTML：

<section>
<h1 class="outline">Shopping List Items</h1>
     <ul class="shopping_item_list">
    <li class="tile">Flowers<span class="delete">Delete</span></li>
    </ul>
</section>

我的jQuery：

$("input[name='shopping_item']").change(function() { 
    var item = $(this).val();   
    $("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list");
    $(".tile").removeClass("middle");   
    $(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});

这不起作用，我无法弄清楚原因。我是jQuery的新手。

另外，我需要添加＆＃34;删除＆＃34;跨越到列表项目，我不知道如何。

感谢您提供的任何帮助！

已编辑添加：

感谢此处的反馈，我能够使用它：

$("input[name='shopping_item']").change(function() {
    var item = $(this).val();   
    $("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + "  </li>").prependTo(".shopping_item_list");
    $(".tile").removeClass("middle");   
    $(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});

然而，在我的jquery中，我有类的功能＆＃34; tile＆＃34;和＆＃34;删除＆＃34;不适用于新添加的项目。

// hide delete button
$(".delete").hide();

// delete square
$(".tile").hover(function() {
    $(this).find(".delete").toggle();
});

$(".tile").on("click", ".delete", function() {
    $(this).closest("li.tile").remove(); 
    $(".tile").removeClass("middle");   
    $(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});

// cross off list 
$(".tile").click(function() {
    $(this).toggleClass("deleteAction");
});

应用这些类的新项目根本不使用这些功能。我是否需要添加添加项目下方的功能？它们出现在我的js文件中的顺序是否重要？我需要添加某种功能吗？

Answer 1

你不能在一个字符串中放置一个变量（在这种情况下为item）并期望它放置它的值。（可以在PHP中完成。）对于编译器，它只是一个字符串。你只需要从双引号中取出它因此，声明：

$("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list");`

应该是：

$("<li class='tile'>" + item + "</li>").prependTo(".shopping_item_list");

Answer 2

改为：

$("#shoppingItem").change(function() { 
    var item = $(this).val();   
    $("<li class='tile'>"+item+"</li>").prependTo(".shopping_item_list");
    $(".tile").removeClass("middle");   
    $(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});

fiddle

使用jquery将文本区域输入添加到列表中

2 个答案: