Question

我花了最后几个小时试图独自完成这项工作，并使用谷歌寻找解决方案，但无济于事。

所以，如果你能帮忙，我会非常感激！

基本上我有一个页面，在“预览模式”下有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;
  });
});

Answer 2

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

您需要进行此修改才能找到适合某次点击的readMoreSlider。

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

根据您的实际标记，您的看法可能略有不同。

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

2 个答案: