Очистка класса с использованием Jquery перед использованием toggleClass

Начальный - ОБНОВЛЕНИЕ:

HTML:

<li class="span3 trainer-profiles active">
    <aside class="trainer-info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, fugit hic ex delectus fugiat quidem atque esse. Quod, pariatur, voluptatem.</p>
    </aside>

    <img src="/img/placeholder/trainer-pic.png" alt="" class="trainer-pic">
        <h2 class="trainer-name">name</h2>
        <a href="#" class="trainer-icon"></a>
</li>

JS:

$(".trainer-profiles > a.trainer-icon").on("click", function(e){
    e.preventDefault();
    $(this).parent().toggleClass("active");
});
$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").siblings().toggleClass("active");
});

Как видите, в одном разделе показан непосредственный дочерний элемент клика. Другой показывает все. Однако, если класс «активный» уже присутствует, когда вызывается другой блок кода, сценарий удаляет «активный» из-за toggleClass API.

Каков самый быстрый способ удалить все предыдущие активные классы перед использованием toggleClass API. Поскольку на данный момент любой класс с активным классом удаляется, а другие добавляются «активными».

Любая помощь приветствуется :)

Большое спасибо!

------> Решение

&.show-all{
    @extend .trainer-profiles.active;
}

Создал новый класс, расширение предыдущего класса дает мне тот же результат.

jQuery:

$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").siblings().toggleClass("show-all");
});

Добавив класс .show-all к переключателю, я имитировал поведение класса и то, как он находится внутри toggleClass. Когда класс удаляется, он не отменяет исходный класс .active.

Я почти уверен, что смогу привести jQuery в меньшее состояние, но в настоящее время он эффективен.


jquery toggleclass
person Neil    schedule 31.08.2013    source источник
comment
пожалуйста, поделитесь своим скриптом и html   -  person Arun P Johny    schedule 31.08.2013
comment
если снова щелкнуть viewAll, когда отображаются элементы, хотите ли вы скрыть элементы   -  person Arun P Johny    schedule 31.08.2013
comment
извините, упустил важный момент... какой класс вы хотите удалить?   -  person Arun P Johny    schedule 31.08.2013
comment
также вы можете обновить демо jsfiddle.net/arunpjohny/3HfPA/1 с вашими стилями   -  person Arun P Johny    schedule 31.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

здесь мы не собираемся переключать состояние... просто добавляем активный класс ко всем элементам, так как опция говорит viewAll

$(".trainer-profiles > a.trainer-icon").on("click", function(e){
    e.preventDefault();
    $(this).parent().toggleClass("active");
});
$(".trainers-view-all").on("click", function(e){
    e.preventDefault();
    $(".trainer-profiles").addClass("active");
});
person Arun P Johny    schedule 31.08.2013
comment
единственный вариант - я хотел бы также удалить класс. Поскольку .trainer-profiles имеет прозрачный фон. - person Neil; 31.08.2013
comment
@Neil, если вы удалите класс, это не будет операция переключения, потому что, когда переключатель запускается, класса больше нет, поэтому он просто добавит его. - person Arun P Johny; 31.08.2013
comment
обновил мой пост с решением. Спасибо за помощь, простой класс добавления вдохновил меня! - person Neil; 31.08.2013