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

2023-11-23

我想仅使用一个 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>

Problem

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

Solution

为每个元素使用类 - 即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()向下滑动与前一系列选择器匹配的任何元素

Demo

// 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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)