При использовании события click в классе jQuery, как я могу избежать вызова события для всех с этим именем класса? - PullRequest
Новая
       2

При использовании события click в классе jQuery, как я могу избежать вызова события для всех с этим именем класса?

2 голосов
/ 19 января 2011

Я прошу прощения за плохо сформулированный вопрос, но если вы посмотрите на код, то, что я спрашиваю, действительно довольно просто. 

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

Далее я попытаюсь измениться. + переключиться на (это) и посмотреть, что происходит.

Ура! * * 1013

1 Ответ

4 голосов
/ 19 января 2011

Вам необходимо присвоить переменную событию функции щелчка, а затем использовать 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 >>');
    }
});
...