Question

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

当用户点击按钮时，我试图隐藏并显示某些内容。

我的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并隐藏.detail div。但是，当我再次点击edit按钮时，它会在我的页面中显示每个.details div（即使它位于不同的.slide-content div下）。我的意图是在当前.detail

下只显示1 .slide-content. div

我不确定这里发生了什么。任何人都可以帮我解决这个问题吗？非常感谢！

Answer 1

您没有正确关闭括号：

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

更清楚地看问题：

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

所以你明确地呼叫$('.details').show()。

你想要这个：

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

但实际上，你不需要find()的jquery对象，所以这也适用（在这里，以及你使用这种模式的其他地方）：

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

Answer 2

实际上这就是您所需要的：http://jsbin.com/IsUQaJA/1/edit

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

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

2 个答案: