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

JQuery隐藏/显示最接近的div

1 个答案:

Fiddle