javascript - 倍数上的按钮切换文本

Question

我有一个按钮设置为在单击时使用类 read-more 切换 div 的高度，但是我在每个页面上都有相同代码的多个版本，因为帖子是通过wp_query。如何调整以下代码以仅切换与其位于同一代码块中的阅读更多 div？

HTML

<article>
    <h3>Title</h3>
    <p>Intro text</p>
    <div class="read-more">
        <p>Toggle Text</p>
    </div>
    <button class="toggle-text">Read More</button>  
</article>

<article>
    <h3>Title</h3>
    <p>Intro text</p>
    <div class="read-more">
        <p>Toggle Text</p>
    </div>
    <button class="toggle-text">Read More</button>  
</article>

JS

/* Toggle event to show/hide 'read more' content */
$(document).ready(function(){
    $("button.toggle-text").click(function(){
        $(".read-more").animate({
            height: "toggle",
            opacity: "toggle"
        }, 400);
    });
});

$(function(){
   $(".toggle-text").click(function () {
      $(this).text(function(i, text){
          return text === "Read More" ? "Read Less" : "Read More";
      })
   });
})

JSFIDDLE

Answer 1

更改此:

$(".read-more").animate({

对此:

$(this).siblings(".read-more").animate({

Here is your updated JSFiddle

上面的代码查找相同父级下具有read-more类的元素。