jQuery 删除 .click 上的类

Question

这是我的 html:

<a href="#">Read more</a>

<div class="moreDetails">
  <p class="additionalText">Some text help here, random length.</p>
  <p class="author">
    <span class="bolder"><a href="minidashboard.php?user_url=http://url.people/1332517">Name</a>
    </span>
  </p>
<div class="replies">
  <span>
    <a href="topic.php?id=http://url/topics/1049198">1</a>
  </span>
</div>

然后我使用 jQuery 将一个类添加到 .additionalText div 当其文本长度超过 36 个字符时。

jQuery:

$('.moreDetails p.additionalText').filter(function () {
  if ($(this).text().length > 32) {
    $(this).addClass('trim');
  }
});

我现在想要的是当<a href="#">Read more</a>时点击类(class).trim被删除并显示内容。

.trim将段落设置为固定高度，并将溢出设置为隐藏。

Answer 1

您可以为该链接指定一个类，如下所示:

<a class="readMore" href="#">Read more</a>

然后添加一个点击处理程序，如下所示:

$("a.readMore").click(function() {
  $(this).next().find('.additionalText').removeClass('trim');
});

这通过查找 <div> 来实现。相对于<a>通过 .next() 和 .find() 。如果<div>不立即遵循 <a>就像在您发布的代码中一样，这可能需要一些调整，例如，如果中间有元素但它们仍然是您需要的 sibling .nextAll('.moreDetails:first') 而不是 .next() .