jquery - 当在类上使用 jQuery 的单击事件时，如何避免为所有具有该类名的事件调用该事件？

Question

我很抱歉这个措辞不好的问题，但是如果你看看代码，我要问的其实很简单。

$(".toggle").click(function () { 
    var togg = $(this).attr( 'id' );
    if( $(this).text() == 'Read More >>' )
    {
        $("." + togg).addClass( "myBlurbExpanded" , 2000 );
        $("." + togg).removeClass( togg , 2000 );
        $(this).text('Read Less >>');
    }
    else if( $(this).text() == 'Read Less >>' )
    {
        $(".myBlurbExpanded").addClass( togg , 2000 );
        $(".myBlurbExpanded").removeClass( "myBlurbExpanded" , 2000 );
        $(this).text('Read More >>');
    }
   });

我的页面在他们的照片旁边有一堆不同人的传记。我不希望整个简历可见，因此有一个“显示更多”和“显示更少”链接。 “显示更多/更少”链接具有“.toggle”类。因此，每次执行此单击时，所有传记都会展开。如何将传记扩展限制为仅单击的传记扩展。我是否以错误的方式将 .toggle 类添加到链接中？谢谢!

感谢您的回复。

首先，这是我的 html 示例

<div class="teamInfo">
    <h3 class="lightblue">John Doe</h3>
    <p class="lightblue"><strong>Programmer</strong></p>
    <div class="myBlurb8">
      information about this person
    </div>
    <a href="#" onclick="return false;" id="myBlurb8" class="toggle">Read More >></a>
</div>

接下来我会努力改变。 + 切换到 (this) 并看看会发生什么。

干杯!

Answer 1

您需要为点击函数的事件分配一个变量，然后使用 event.target 而不是 this，如下所示:

$(".toggle").click(function (event) { 
    var $target = $(event.target);
    var togg = $target.attr( 'id' );
    if( $target.text() == 'Read More >>' )
    {
        $("." + togg).addClass( "myBlurbExpanded" , 2000 );
        $("." + togg).removeClass( togg , 2000 );
        $target.text('Read Less >>');
    }
    else if( $target.text() == 'Read Less >>' )
    {
        $(".myBlurbExpanded").addClass( togg , 2000 );
        $(".myBlurbExpanded").removeClass( "myBlurbExpanded" , 2000 );
        $target.text('Read More >>');
    }
});