javascript - 将 (this) 与动态内容一起使用 jQuery

Question

我无法理解使用 jQuery 添加动态内容。我的代码会将项目添加到列表中，当您单击该列表上的项目时，该项目的内容应该可见。目前，当我单击某个项目时，会显示所有项目的内容。我尝试添加(这个)，但这不起作用。

$(document).ready(function() {
var hidden = true;

$("#add").click(function() {
    var item = $("#name").val();
    var date = $("#date").val();

    if(item == "") {
        return false;
    }

    var prependItem =
    "<li class='new'>"+
        "<button class='btn btn-default' id='check'></button>"+
        "<span class='item'>&nbsp;"+item+"</span>"+
        "<ul class='sub'>"+
            "<li>"+
                "Due date: 5/3/2015"+
            "</li>"+
        "</ul>"+
    "</li>";

    $(".todo").prepend(prependItem);
    $(".sub").hide();
    $(".form")[0].reset();

    return false;
});

// show sub content
$(".todo").on("click", ".item", function() {
    if(hidden == true) {
        $(".sub").show();
        hidden = false;
    }
    else {
        $(".sub").hide();
        hidden = true;
    }
});

$(".todo").on("click", "#check", function() {
    // line through
})                                      
});

Answer 1

.sub 元素是 .item 的同级元素，因此也可以使用 this 来获取对该元素的引用引发事件，您需要使用 siblings('.sub')。您还可以使用 toggle() 来简化代码。试试这个:

$(".todo").on("click", ".item", function() {
    $(this).siblings(".sub").toggle();
});