javascript - jquery基础入门问题: How do i make my function reusable?

Question

在过去的几个小时里，我一直在尝试自己完成这项工作，并使用 Google 寻找解决方案，但无济于事。

因此，如果您能提供帮助，我将不胜感激!

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

当您点击某个简介的“阅读更多”时，它会打开“完整模式”。

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

我该如何编辑下面的代码；

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

代码:

$("a#btnReadMore").click(function() {
    $('.readMoreSlider').slideToggle("fast");
    $(this).toggleClass("readMoreSliderActive"); 
    return false;
});

感谢您的帮助!

Answer 1

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

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

使用 CSS:

div.more { display: none; }

和Javascript:

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