使用（this）與動態內容jQuery

Question

我很難理解使用jQuery添加動態內容。 我的代碼會將項目放在列表的前面，當您單擊該列表上的項目時，該項目的內容應該可見。 此刻，當我單擊一個項目時，將顯示所有項目的內容。 我嘗試添加（this），但是不起作用。

$(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();
});

Answer 2

sub是單擊item的下一個同級item因此您可以將this與.next（）一起使用

// show sub content
$(".todo").on("click", ".item", function() {
    $(this).next().toggle();
});

另外，不要使用變量來存儲隱藏狀態，請使用.toggle（）

Answer 3

用這個

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