Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как присвоить блоку другой класс при клике мышкой на него?

Как присвоить блоку другой класс при клике мышкой на него?


     05.04.2015    Общие вопросы по вёрстке, Ламерские вопросы    1705

вопрос
Код блока:
<div class="block">
    <div class="block_pict"><img src="{image}" alt="{title}" /></div>
    <div class="block_text">
        <h2><a href="{full-link}" class="title">{title}</a></h2>
        <div class="block_cats">{link-category}</div>
    </div>
</div>


надо, чтобы при клике на ссылку с заголовком всему блоку вместо класса "block" присвоился класс "block active"

Ответил: D0Gmatist


Вариант 1 (клик по всему блоку)
$(document).on('click', '.block', function () {
    if ($(this).hasClass('active') == false) {
        $('.block').removeClass("active");
    }
    $(this).toggleClass("active");
    return false;
});
ТЫЦ

Вариант 2 (клик по title)
$(document).on('click', '.title', function () {
    $form = $(this).closest('.block');
    if ($form.hasClass('active') == false) {
        $('.block').removeClass('active');
    }
    $form.toggleClass('active');
    return false;
});
ТЫЦ

11 комментариев

FastFud
Юзер

FastFud - 5 апреля 2015 21:19 -

$(function (){
    $('.block').each(function(){
        $(this).find('.title').click(function(){
            $(this).parents('.block').attr('class','block-active');    
        });
    });
});

kild
Юзер

kild - 5 апреля 2015 21:29 -

спасибо, работает. но вылезло другое, теперь надо еще чтобы предыдущему блоку с active возвращалось просто block

FastFud
Юзер

FastFud - 5 апреля 2015 21:35 -

$(function (){
    $('.block').each(function(){
        $(this).find('.title').click(function(){
            $(this).parents('.block').attr('class','block-active').siblings().attr('class','block');    
        });
    });
});

kild
Юзер

kild - 5 апреля 2015 21:39 -

огромное спасибо, очень выручили, все работает

FastFud
Юзер

FastFud - 5 апреля 2015 21:41 -

Там все-же ссылка, стоит добавить после
$(this).parents('.block').attr('class','block-active').siblings().attr('class','block'); 
строку
return false;

kild
Юзер

kild - 5 апреля 2015 21:43 -

да, со ссылкой не работало, теперь вообще идеально )

kild
Юзер

kild - 5 апреля 2015 21:54 -

ув. D0GMATIST, да, так тоже работает, но остается вторая проблема, блоку с active надо возвратить просто block

D0Gmatist
Местный

D0Gmatist - 5 апреля 2015 21:59 -

оно остаётся ...
если активно то
class="block active"
если снято active то становится
class="block"

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

kild
Юзер

kild - 5 апреля 2015 21:59 -

теперь просто ссылку открывает, не знаю куда return false; ставить и надо ли вообще )

D0Gmatist
Местный

D0Gmatist - 5 апреля 2015 22:05 -

Поправил... и по ссылке тоже в примере
У FastFud, пример рабочий но не правильно перебирать все классы... это дольше ( в мили секундах) =)))

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

kild
Юзер

kild - 5 апреля 2015 22:26 -

да, работает и по первому варианту и по второму, спасибо вам обоим

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх