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来获取当前选中的元素，您还应该为多个元素使用类而不是ID，如下所示：

$('.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。

希望它有所帮助。

Answer 2

You can achieve it by e.currentTarget

$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});

当具有相同的类名时，如何使用jQuery函数处理特定元素？

2 个答案: