Question

我需要帮助让下面的切换脚本为图库中的所有缩略图工作，“阅读更多”和“少阅读”功能，而不仅仅是第一个缩略图。每张卡都可以包含信息，包括段落，项目符号和链接。而且这个页面看起来势不可挡，因此我使用了“Read More”和“Read less”功能。目前，脚本选择ID，而不是类，我认为这是问题（我发现脚本在线）。

有关如何更新脚本以适用于库中所有缩略图的任何想法吗？

我最好的猜测是调用一个类名，但我想这会同时切换所有缩略图，这也没有用。

理想情况下，每个缩略图可以独立于其他缩略图“显示更多”和“显示更少”。

$("#toggle").click(function() {
  var elem = $("#toggle").text();
  if (elem == "Read More") {
    //Stuff to do when btn is in the read more state
    $("#toggle").text("Read Less");
    $("#text").slideDown();
  } else {
    //Stuff to do when btn is in the read less state
    $("#toggle").text("Read More");
    $("#text").slideUp();
  }
});

#text{
  display:none;
}

a#toggle {
  color:#2095cf;
  margin:10px 0px 10px 0px;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- CLASS CARD 1 -->
<!-- CLASS CARD 1 -->
<!-- CLASS CARD 1 -->
  <div class="class-card">
  <h2>Course Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis eros, iaculis vel sem sed, aliquam pretium nunc. Nulla luctus arcu est, sed fermentum quam aliquam nec.</p>
  <!-- NOTE: '#text' wraps the expandable stuff -->
  <span id="text">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
      </ul>
      <p><strong>Pick a Time:</strong></p>
      <a class="black-button" href="#">Monday 7/23 @ 1PM &ndash; 3PM</a>
      <a class="black-button" href="#">Wednesday 7/24 @ 12PM &ndash; 2PM</a>
  </span><!--end text -->

  <!-- '#toggle' triggers the JQuery function -->
  <a id="toggle">Read More</a>

  </div><!-- end class-card -->





<!-- CLASS CARD 2 -->
<!-- CLASS CARD 2 -->
<!-- CLASS CARD 2 -->
  <div class="class-card">
  <h2>Course Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis eros, iaculis vel sem sed, aliquam pretium nunc. Nulla luctus arcu est, sed fermentum quam aliquam nec.</p>
  <!-- NOTE: '#text' wraps the expandable stuff -->
  <span id="text">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
      </ul>
      <p><strong>Pick a Time:</strong></p>
      <a class="black-button" href="#">Monday 7/23 @ 1PM &ndash; 3PM</a>
      <a class="black-button" href="#">Wednesday 7/24 @ 12PM &ndash; 2PM</a>
  </span><!--end text -->

  <!-- '#toggle' triggers the JQuery function -->
  <a id="toggle">Read More</a>


  </div><!-- end class-card -->

Answer 1

更像这样的东西应该有效。这是一个小提琴：https://jsfiddle.net/0458dxb3/

你想要使用整个类，但是要定位你的主“卡”类，使用jQuery的'最接近'来自$(this)（这是你点击的元素），直到jQuery找到它。 / p>

如果你愿意的话，“理论”是找到你想要使用的'card'元素（包含你点击的'read more'按钮），然后使用jQuery的“find”方法（这就是沿着DOM）与你需要访问的所有孩子一起工作。这将使您保持在该元素内，并且您将不会访问页面上的任何其他类。

Obs ：在这种情况下，您应该使用class代替id，因为每个element应该有一个id。如果您有两个elements具有相同的id，则选择器（如您的示例中）会选择第一个。

Obs 2 ：另一种方法是动态且随机地分配id值，但在这种情况下，这将是困难和压力。

<强> JS

$(".toggle").click(function() {
  var card = $(this).closest('.class-card');
  var toggleText = card.find('.toggle').text();
  if (toggleText == "Read More") {
    //Stuff to do when btn is in the read more state
    card.find(".toggle").text("Read Less");
    card.find(".text").slideDown();
  } else {
    //Stuff to do when btn is in the read less state
    card.find(".toggle").text("Read More");
    card.find(".text").slideUp();
  }
});

html 很好，除了需要将某些ID更改为类。

<!-- CLASS CARD 1 -->
<!-- CLASS CARD 1 -->
<!-- CLASS CARD 1 -->
  <div class="class-card">
  <h2>Course Title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse felis eros, iaculis vel sem sed, aliquam pretium nunc. Nulla luctus arcu est, sed fermentum quam aliquam nec.</p>
  <!-- NOTE: '#text' wraps the expandable stuff -->
  <span class="text">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
      </ul>
      <p><strong>Pick a Time:</strong></p>
      <a class="black-button" href="#">Monday 7/23 @ 1PM &ndash; 3PM</a>
      <a class="black-button" href="#">Wednesday 7/24 @ 12PM &ndash; 2PM</a>
  </span><!--end text -->

  <!-- '#toggle' triggers the JQuery function -->
  <a class="toggle">Read More</a>

  </div><!-- end class-card -->

Answer 2

您提供给.click的回调函数将有一个事件对象作为第一个参数。该事件对象的.target属性应该是单击的单个项目。

所以你可以使用类似的东西：

$('.thumbnail').click(function(e) {
    $(e.target).whatever();  // Do whatever you need to do using e.target
});

所有缩略图上的文字“阅读更多”和“少阅读”脚本，而不仅仅是一个

2 个答案: