javascript - 关闭时恢复幻灯片切换按钮文本

Question

好吧，我为“阅读更多”按钮编写了以下代码。单击它可切换 div 并将“阅读更多”更改为“阅读更少”。单击另一个将关闭另一个打开的 div，并将文本切换为适当的措辞。

但是，当我单击同一个切换按钮时，我似乎无法弄清楚如何将文本切换回“阅读更多”。

示例阅读更多阅读更多内容 y

如果我点击“阅读更多 x”，它会切换 x 的隐藏 div，并且按钮变为“阅读更少 x”。当我单击“少读 x”时，它会切换 div，但保持为“少读 x”而不是恢复。

我尝试将 $(this).text 代码段插入函数的各个部分，但无济于事。

$(document).ready(function () {
        var content = $('.below').hide();
        $('.toggleBtn').on('click', function () {
             var $this = $(this);
			$(this).text("read less");
           $this.next('.below').slideToggle().siblings('.below').slideUp();
           $this.toggleClass('active').siblings('.toggleBtn.active').removeClass('active').text("read more");
            return false;
			});
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<div class="toggleBtn">read more x</div>
<div class="below">slideout x</div>

<div class="toggleBtn">read more y</div>
<div class="below">slideout y</div>

Answer 1

我建议使用 data 属性来存储当前文本，如下所示:

$(document).ready(function () {
        var content = $('.below').hide();
        $(".toggleBtn").each(function(){
           $(this).data("text", $(this).text()); //Save the current text() to data-text attribute
        });
        $('.toggleBtn').on('click', function () {
           var $this = $(this);
           
           if($this.text() == "read less")
              $this.text($this.data("text")); //Replace text with data-text if clicked again
           else
              $this.text("read less");
           
           $this.next('.below').slideToggle().siblings('.below').slideUp();
           $this.toggleClass('active').siblings('.toggleBtn.active').each(function(){
              $(this).text($(this).data("text")); //Replace previous open sibling text with data-text
           }).removeClass('active');
            return false;
			});
        //register the handler to button element inside .below
        $('.below .close').on('click', function () {
            //find the ancestor .below element of the clicked button
            $(this).closest('.below').slideToggle();
        });
    });

.below {display: none;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<div class="toggleBtn">read more x</div>
<div class="below">slideout x</div>

<div class="toggleBtn">read more y</div>
<div class="below">slideout y</div>