如何在单个div中显示和隐藏元素？

FlyingCat 发表于 Dev

飞猫

我有一个奇怪的案例需要帮助。

我试图在用户单击按钮时隐藏并显示某些内容。

我的HTML

   <div class='slide-content'>
        <h1>Title</h1>
        <div class='title-bar'>
            sub title here
            <div class='edit-container'>
                <a class='edit' href='#'>Edit</a>
            </div>
        </div>
        <div id='content' class='details'>
            <div class='contents'>
                 <p>contents here</p>
            </div>
            <div class='break'></div>
        </div>
        <div id='edit-content' class='content-details'>
             <div class='contents'>
                <div class='editable-content'>
                    contents here…...                          
                </div>
            </div>             
            <div class='break'></div>
        </div>
    </div>

    <div class='slide-content'>
     …...

另外10个幻灯片内容div…

jQuery的

   $('.edit').on('click', function(e){
       e.stopPropagation();
       if($(this).text()=='Edit'){
           $(this).text('Done');
           $(this).closest('.slide-content').find($('.content-details')).show();
           $(this).closest('.slide-content').find($('.details')).hide();
       }else{
           $(this).text('Edit');
           $(this).closest('.slide-content').find($('.content-details')).hide();
           $(this).closest('.slide-content').find($('.details').show());
       }
   })
});

的CSS

.content-details{
  display:none;
}

我的问题是，当我edit第一次单击按钮时，它显示了我的.content-details并且隐藏了.detaildiv。但是，当我edit再次单击该按钮时，它将显示.details页面中的每个div（即使它位于不同的.slide-contentdiv下）。我的意图是.detail在当前情况下仅显示1格.slide-content.

我不确定这里会发生什么。有人可以帮我吗？非常感谢！

杰森

您没有正确关闭括号：

$(this).closest('.slide-content').find($('.details').show());

为了更清楚地看到问题：

$(this).closest('.slide-content').find(
    $('.details').show()
);

因此您正在明确呼叫$('.details').show()。

你要这个：

$(this).closest('.slide-content').find($('.details')).show();

但是实际上，您不需要使用的jquery对象find()，因此，效果也一样好（在这里以及您正在使用此模式的其他地方）：

$(this).closest('.slide-content').find('.details').show();

另外，作为最后的提示，我认为简化代码并使用一些缓存将是很好的：

$('.edit').on('click', function (e) {
    e.stopPropagation();
    var $this = $(this);
    $this.text($this.text() == 'Edit' ? 'Done' : 'Edit');
    $this.closest('.slide-content').find('.content-details, .details').toggle();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。