时间戳

首页 > 解决方案 > 如何使用一个 jquery 在同一页面中制作多个阅读更多按钮？

javascript - 如何使用一个 jquery 在同一页面中制作多个阅读更多按钮？

问题描述

我想只使用一个 jquery 在同一页面中制作多个阅读更多和阅读更少的按钮。当我单击阅读更多按钮时，它会显示一些内容，并在段落末尾显示阅读更少按钮。我完成了我的第一步。一页有三个阅读更多按钮。一个工作得很好，但另外两个不工作。请给一些建议。

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
     
      $("#toggle").text("Read Less");
      $("#text").slideDown();
    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp();
    }
  });
});
#text{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section uk-section-small uk-section-default">
    <div class="uk-container">
        <h2 class="heading-primary uk-text-center "><span>Guide</span></h2> 
            <div class="uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
                <div>
                    <div class="uk-text-left" uk-grid>
                        <div class="uk-width-1-4@s uk-text-center">
                             <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                        <div class="uk-width-3-4@s">
                            <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                        </div>
                    </div>
                      <div class="uk-text-left" uk-grid>
                        <div class="uk-width-3-4@s">
                              <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                              <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                              <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                          </div>
                        <div class="uk-width-1-4@s">
                            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                    </div>

                    <div class="uk-text-left" uk-grid>
                        <div class="uk-width-1-4@s uk-text-center">
                             <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
                        </div>
                        <div class="uk-width-3-4@s">
                            <h1 style="display: inline">Name</h1><h2 style="display: inline;  font-style: italic;">(Designation)</h2>
                            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>        
                            <p class="uk-text-justify" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a id="toggle">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

标签： javascriptjqueryhtmlcssuikit

解决方案

问题

您正在添加多个相同的元素id，这是不合适的，这意味着当您编写 javascript 时会出现错误。通过使用id代码无法区分相关的不同元素之间的区别 - 即扩展了错误的文本。您也没有告诉代码有关单击的元素与要显示/隐藏的元素之间的关系。

解决方案

为您的每个元素使用类 - 即toggle-text-button用于触发使用类显示或隐藏元素的链接.toggle-text。

我使用以下代码从 移动<a class="toggle-text-button">Read More</a>到适当的元素：

$(this).parent().children(".toggle-text").slideDown();

代码说明：

  • $(this)jquery 表示法，告诉代码从当前处于焦点的元素开始（即单击的那个）
  • .parent()向上移动 DOM 树一个元素（另一种方法是.closest()继续向上移动直到满足选择器条件）
  • .children(".toggle-text")找到当前元素的所有子元素（因为我们已经向上移动了 DOM 树，这是被点击元素的父元素），它们与选择器匹配
  • .slideDown()向下滑动与前一系列选择器匹配的任何元素

演示

// Add click event dynamically
$(document).on("click", ".toggle-text-button", function() {

  // Check if text is more or less
  if ($(this).text() == "Read More") {

    // Change link text
    $(this).text("Read Less");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide down
    $(this).parent().children(".toggle-text").slideDown();
    
  } else {


    // Change link text
    $(this).text("Read More");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide up 
    $(this).parent().children(".toggle-text").slideUp();
    
  }
  
});
.toggle-text {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet" />
<div class="uk-section uk-section-small uk-section-default">
  <div class="uk-container">
    <h2 class="heading-primary uk-text-center "><span>Guide</span></h2>
    <div class="uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
      <div>
        <div class="uk-text-left" uk-grid>
          <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
        <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
        
        <div class="uk-width-1-4@s uk-text-center">
            <img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
          </div>
          <div class="uk-width-3-4@s">
            <h1 style="display: inline">Name</h1>
            <h2 style="display: inline;  font-style: italic;">(Designation)</h2>
            <p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
            <p class="uk-text-justify toggle-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.</p><a class="toggle-text-button">Read More</a>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

替代演示

如果您将元素与属性链接，则可以简化您的 javascript。请参阅下面的基本演示：

$(document).on("click", ".toggle-text-button", function() {


  if ($(this).text() == "Read More") {

    $(this).text("Read Less");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();

  } else {

    $(this).text("Read More");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
  
  }

});
.toggle-text {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Text that cannot be hidden.</p>
<p class="toggle-text" id="toggle-text-1">Text to show and hide.</p>
<a class="toggle-text-button" toggle-text="1">Read More</a>

推荐阅读