используя (это) с динамическим контентом 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, так что при использовании для получения справки к элементу, который поднял событие, вам нужно использовать siblings('.sub'). Вы также можете упростить код, используя toggle(). Попробуйте это:

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

Answer 2

sub является следующим сестринским нажатого 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(); 
});