javascript - JQuery隐藏/显示最接近的div

Question

当用户单击某个图标时，我想隐藏/显示适合该操作的相关 div。

这是我使用的 JQuery:

$('.aTask').on('click','.descHide',function(){
    $(this).closest('.taskDesc').hide();
    $(this).closest('.descShow').show();
    $(this).closest('.descHide').hide();
});

$('aTask').on('click','.descShow',function(){
    $(this).closest('.taskDesc').show();
    $(this).closest('.descShow').hide();
    $(this).closest('.descHide').show();
});

$('#showTasks').on('click','.delete',function(){
    $(this).closest('.aTask').remove();
});

但预期的操作并未发生，如 JSFIddle 所示。在我点击减号的地方，应该会出现一个加号，并且下面的文本应该消失或出现。

Answer 1

使用.parent().find(...)而不是.closest(...)。此外，id 必须是唯一的。

Fiddle

$('.aTask').on('click', '.descHide', function () {
    $(this).parent().find('.taskDesc').hide();
    $(this).parent().find('.descShow').show();
    $(this).parent().find('.descHide').hide();
});

// you had a typo here $('aTask')
$('.aTask').on('click', '.descShow', function () {
    $(this).parent().find('.taskDesc').show();
    $(this).parent().find('.descShow').hide();
    $(this).parent().find('.descHide').show();
});

$('#showTasks').on('click', '.delete', function () {
    $(this).closest('.aTask').remove();
});