javascript - 当特定元素具有相同的类名时，如何获取 jQuery 函数来处理它们？

Question

我有部分 (div)，里面有文本，但是当文本太长时，我会把文本“淡化”(使用 css)并显示一个“显示更多”按钮，该按钮显示该文本的全文单击时的特定 div。问题是它只适用于第一个 div，我相信这是因为它们都具有相同的类和 ID 名称。解决这个问题的最佳方法是什么？这是我的代码:

HTML:

<div id="fade-container">
  <div id="fade-content">
   <p>
    Long text goes here...
    <div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
   </p>
  </div>
</div>

脚本:

<script>
$('.fade-anchor').click(function(e){
    e.preventDefault();
    $('#fade-content').css('max-height','none');
    $('.fade-anchor').remove();
});
</script>

顺便说一下，信息是在 php while 循环中从数据库中获取的。

Answer 1

当用户点击.fade-anchor时，你可以使用this获取当前选中的元素，对于多个元素你也应该使用classes而不是ids，比如所以:

$('.fade-anchor').click(function(e){
    e.preventDefault();
    $(this).parent('.fade-content').css('max-height','none');
    $(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});

您还可以查看此 jsFiddle与工作版本。

希望对您有所帮助。