问题

Question

我只想使用一个jquery在同一页面中进行多次阅读和阅读减少按钮。当我单击“阅读更多”按钮时，它显示了一些内容，在段落的末尾显示了“阅读较少”按钮。我完成了第一步。一页中有三个readmore按钮。一个工作良好，但另两个工作不正常。请提出一些建议。

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

Answer 1

问题

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

解决方案

对每个元素都使用类-即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")查找与选择器
.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>

Answer 2

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

      $(this).text("Read Less");
      $("#text").slideDown();
    } else {

      $(this).text("Read More");
      $("#text").slideUp();
    }
  });

});

如何使用一个jquery在同一页面上使多个按钮更多？

2 个答案:

问题

解决方案

演示

替代演示