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

Question

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

Kaj*_*yar 6 html javascript css jquery uikit

我想仅使用一个 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();
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

#text{
  display:none;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Oli*_*ure 5

问题

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

解决方案

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

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

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

Run Code Online (Sandbox Code Playgroud)

代码说明：

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

演示

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

Run Code Online (Sandbox Code Playgroud)

// 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();
    
  }
  
});

Run Code Online (Sandbox Code Playgroud)

.toggle-text {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

替代演示

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

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

Run Code Online (Sandbox Code Playgroud)

$(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();
  
  }

});

Run Code Online (Sandbox Code Playgroud)

.toggle-text {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，1 月前
查看次数：	3550 次
最近记录：	7 年，1 月前