Question

我正在为页面创建一个精简的博客功能。在每个页面上，我将有10篇博文，每篇博文都有“阅读更多”文本，允许用户点击显示其他内容。我知道我可以创建10个不同的Id，但jQuery会马虎。

有没有办法我只能显示适用于“阅读更多”选项的博文的文字？

目前，如果用户点击第一个博客的“阅读更多”，它不仅会显示第一个博客的隐藏文字，而是第二个博客，我只希望它显示第一个博客。当用户点击第二个“Read-More”选项时，仅显示第二个博客的附加内容。

非常感谢任何帮助，谢谢！

function() {
  "use strict";

  $('.read-more').click(function() {
    $('.hidden-text').slideDown('slow');
    $('.read-more').hide();
  });

  $('.read-less').click(function() {
    $('.hidden-text').slideUp('slow', function() {
      $('.read-more').show();
    }); {);
  });

span {
  color: green;
}

span:hover {
  text-decoration: underline;
}

.hidden-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="intro-p">
  <p>Text Content shown immediately for BLOG 1. <span class="read-more">Read Full Post</span></p>
</div>

<div class="hidden-text">
  <p>Text which is hidden unless Read More Text is clicked. <span class="read-less">Read Less</span></p>
</div>

<div class="intro-p">
  <p>Text Content shown immediately for BLOG 2. <span class="read-more">Read Full Post</span></p>
</div>

<div class="hidden-text">
  <p>Text which is hidden unless Read More Text is clicked. <span class="read-less">Read Less</span></p>
</div>

Answer 1

尝试以下

$('.read-more').click(function() {
   /* Find the nearest parent with class "intro-p" 
    * and then showing up the next element (associated element in our case) */
    $(this).closest(".intro-p").next().slideDown('slow'); 
    $(this).hide(); // Hide clicked link
});

$('.read-less').click(function() {
   // Find the nearest parent with class "hidden-text" to slide up
    $(this).closest('.hidden-text').slideUp('slow', function() {
        // Finding the appropriate element to show
        $(this).closest('.hidden-text').prev().find('.read-more').show();
    });
});

进行调整 - plunker

供参考 - prev()，next()，closest()

Answer 2

尝试使用closest()父匹配

它的下一个元素readmore.so你可以匹配最近的父元素并匹配next() read-less元素
使用[prev()] 3

  $('.read-more').click(function() {
    $(this).closest('.intro-p').next('.hidden-text').slideDown('slow');
    $(this).hide();
  });

  $('.read-less').click(function() {
    $(this).closest('.hidden-text').slideUp('slow', function() {
      $(this).closest('.hidden-text').prev('.intro-p').find('.read-more').show();
    });
  });

span {
  color: green;
}

span:hover {
  text-decoration: underline;
}

.hidden-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="intro-p">
  <p>Text Content shown immediately for BLOG 1. <span class="read-more">Read Full Post</span></p>
</div>

<div class="hidden-text">
  <p>Text which is hidden unless Read More Text is clicked. 1<span class="read-less">Read Less</span></p>
</div>

<div class="intro-p">
  <p>Text Content shown immediately for BLOG 2. <span class="read-more">Read Full Post</span></p>
</div>

<div class="hidden-text">
  <p>Text which is hidden unless Read More Text is clicked. 2<span class="read-less">Read Less</span></p>
</div>

"cas": 1499937943452123136

被视为Ids的类

2 个答案: