Question

我有一个按钮设置为在点击时用类read-more切换div的高度，但是我在每个页面上有相同代码的多个版本，因为帖子是通过wp_query生成的。如何调整下面的代码只切换与同一代码块中的read-more 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类的元素。

Answer 2

.read-more是以前的点击按钮的兄弟姐妹。您可以使用单击按钮上下文this以及按钮单击处理程序中的.prev()来定位它。或者您可以遍历最近的文章元素，然后在其中找到.read-more。你也不需要分开处理程序来实现这一点。你可以用单击处理程序编写代码。

 $(".toggle-text").click(function () {
   $(this).prev(".read-more").animate({ 
        height: "toggle",
        opacity: "toggle"
    }, 400);
  $(this).text(function(i, text){
    return text === "Read More" ? "Read Less" : "Read More";
  })
});

或

$(".toggle-text").click(function () { $(this).closest('article').find(".read-more").animate({ //or height: "toggle", opacity: "toggle" }, 400); $(this).text(function(i, text){ return text === "Read More" ? "Read Less" : "Read More"; }) });

<强> Working Demo

多次按钮切换文本

2 个答案: