在多個DIV中使用jquery顯示/隱藏內容

Question

我有一個單頁，有5個帖子，全部在#article。以下是jQuery代碼用來切換隱藏/顯示：

$(".click-show-more").click(function() { 
    if($(".content").hasClass("show-more")) { 
     $(this).text("(Show Less)"); 
    } else { 
     $(this).text("(Show More)"); 
    } 
    $(".content").toggleClass("show-more"); 
}); 

的HTML結構爲：

<div class="article"> 
    <div class="content show-more">Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 

Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. 
    </div> 
    <div class="click-show-more">(Show More)</div> 
</div> 

現在，我有這樣的結構，在一個頁面上5-6次，每當我點擊Show More，所有5-6個帖子都展開。

如何修改我的代碼以僅展開特定帖子？

Answer 1

改變這一行

$(".content").hasClass("show-more") 

到

$(this).closest('.article').find('.content').hasClass("show-more") 

你點擊只會影響特定物品的content。因此，使用this上下文對您有利。

而且這條線

$(".content").toggleClass("show-more"); 

應該

$(this).closest('.article').find('.content').toggle(); 

除非.show-more { display: none }已定義。

代碼

$(".click-show-more").click(function() { 
    var $closestContent = $(this).closest('.article').find('.content'); 

    if($closestContent.hasClass("show-more")) { 
     $(this).text("(Show Less)"); 
    } else { 
     $(this).text("(Show More)"); 
    } 
    $closestContent.toggleClass('show-more'); 
}); 

Check Fiddle

Answer 2

而是找到任何分度content類的，你需要找到相同的article專區內的一個。

因此，這將是這個樣子：

$(".click-show-more").click(function() { 
    var content = $(this).closest('.article').find('.content'); 
    if(content.hasClass("show-more")) { 
     $(this).text("(Show Less)"); 
    } else { 
     $(this).text("(Show More)"); 
    } 
    content.toggleClass("show-more"); 
}); 

什麼是實際發生的事情是，我們正在採取被點擊的DIV：

$(this) 

找到具有article類最接近的父：

$(this).closest('.article') 

然後找到那個的孩子div有content分類：

$(this).closest('.article').find('.content')