Javascript Jquery初学者基本问题：如何使我的函数可重用？

在过去的几个小时里，我一直在尝试自己做这件事，并使用谷歌寻找解决方案，但没有任何效果

所以，如果你能帮忙，我将不胜感激

基本上我有一个页面，在“预览模式”下有3个独立的传记，只显示每个传记的第一段

当你点击一个bio的“阅读更多”时，它会打开“完整模式”

现在发生的事情是，如果我点击一个“阅读更多”链接，它会打开所有3个bio的完整模式

我如何编辑以下代码，以便

• 它只会打开我点击的链接的完整模式
• 使其可重用，这样我就不必为每个bio重复代码3次

代码：

---

谢谢你的帮助

这取决于标记的外观。ID必须是唯一的。我将假设：

<div class="bio">
  <p>...</p>
  <a class="readMore" href="#">read more</a>
  <div class="more">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

和Javascript：

$(function() {
  $("a.readMore").click(function() {
    $(this).next("div.more").slideToggle();
    return false;
  });
});

如果你有，假设：

<div class="bio">
  <div class="readMoreSlider">The bio Text...</div>
  <a class="btnReadMore">Read more</a>
</div>

根据您的实际标记，您的标记可能看起来有点不同

$(function() {
  $("a.readMore").click(function() {
    $(this).next("div.more").slideToggle();
    return false;
  });
});

$("a.btnReadMore").click(function(){ 
//--^ - Make 'btnReadMore' a CSS class, not an ID

  // with this you reference *all* elements of class 'readMoreSlider', 
  // but you want only a single one
  $('.readMoreSlider').slideToggle("fast"); 

  // this should be okay
  $(this).toggleClass("readMoreSliderActive"); 
  return false; 
});

<div class="bio">
  <div class="readMoreSlider">The bio Text...</div>
  <a class="btnReadMore">Read more</a>
</div>

$(this).parent('.bio').find('.readMoreSlider').slideToggle("fast");