Javascript JQuery隐藏/显示最近的div

当用户单击某个图标时，我想隐藏/显示适合该操作的相关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();
});

但预期的行动不会发生，如图所示。单击减号时，应显示一个加号，下面的文本应消失或出现。

使用

.parent（）。查找（…）

而不是

。最近的（…）

。另外，

id

s必须是唯一的

---

在HTML中似乎有多个元素具有相同的ID；ID应该是唯一的，否则会有一些奇怪的结果。descHide、editTask、deleteTask和descShow都需要是类名，因为它们出现多次。

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