jQuery отслеживает CSS-класс который уже убран

[yustnip]

Добрый вечер!

 

Есть простая задача: две кнопки сверху, к каждой привязано изображение. При клике по кнопкам изображение изменяется, также при наведении на каждое изображение происходит смена изображения в зависимости от того, на которое наведено.

 

Для наглядности код в JSFiddle - http://jsfiddle.net/yustnip/92wrmk85/1/

 

Теперь уже по коду в JSFiddle. Сначала при наведении на красный блок все хорошо, он изменяется на зеленый, но если кликнуть сначала на вторую кнопку и потом на обратно на первую, то красный блок начнет меняться на синий, что не нужно.

 

Это происходит потому что, несмотря на удаление через removeClass(), jQuery продолжает отслеживать класс 'b-main-infographics__slide--second' и добавляет класс 'b-main-infographics__slide--second-active' (синий).

 

Подскажите, пожалуйста, как правильно сделать, чтобы все-таки в указанном сценарии цвет в первом блоке при наведении менялся на зеленый?

[antonKar]

Полагаю, спасла функция unbind(). 

И опять же по сути вернулись к тому, откуда начинали.

 

Не навешивайте по сотню раз обработчики событий, смотрите внутри самого обработчика что вам нужно делать. Навели мышку — событие такое "Ага, так, а что там у нас переменная показывает, что там нам делать надо?".

[afdw]

Как можно так именовать классы? Это же просто ужас!

[yustnip]

Как можно так именовать классы? Это же просто ужас!

Я неправильно использую именование по БЭМ или БЭМ в целом ужас?

[Yazon_Nile]

Все у вас нормально. На маленьком кусочке ХТМЛ конечно кажется, что "все пропало".)

[antonKar]

Какой же ужас с классами.

 

Вы при клике не переопределяйте по 20 раз события наведения мыши и отведения, а 1 раз навешайте событие, в котором смотрите по переменной какая кнопка была нажата.

 

А клик уже просто будет менять переменную со статусом и классы.

[Yazon_Nile]

Какой же ужас с классами.

Дальше своих best practice заглядывали?)

[antonKar]

Дальше своих best practice заглядывали?)

 

Заглядывал и вижу ужас. b и main можно спокойно выкинуть и забыть, т.к. даже при такой вёрстке видно, что основным логическим блогом является инфографика.

[klierik]

Я неправильно использую именование по БЭМ или БЭМ в целом ужас?

автор, всё нормально с классами, не парься!

[yustnip]

Спасибо за ответы. Классы наверно все-таки надо было упростить для наглядности примера.   

 

Вы при клике не переопределяйте по 20 раз события наведения мыши и отведения, а 1 раз навешайте событие, в котором смотрите по переменной какая кнопка была нажата.   А клик уже просто будет менять переменную со статусом и классы.

 

 

Спасибо за совет. Попробую переделать, отпишусь в теме.

[Sergik+]

Странно какой ужас БЭМ наводит на простых обывателей )))

[yustnip]

Уф, получилось - http://jsfiddle.net/yustnip/8cp4vnm5/2/

 

Полагаю, спасла функция unbind(). 

[advokatua]

Странно какой ужас БЭМ наводит на простых обывателей )))

почему сразу на простых, и почему он не должен наводить ужас? Если вы БЭМите при верстке лендингов и сайтов на 3-5 страниц, то лучше не отвечайте ))

Вам нужно создать 1 обыкновенный банан, а вы делаете гориллу с бананом и джунгли в придачу. А потом удивляетесь, когда на вас косо поглядывают.

Edited April 25, 2015 by advokatua

[Sergik+]

 

Странно какой ужас БЭМ наводит на простых обывателей )))

почему сразу на простых, и почему он не должен наводить ужас? Если вы БЭМите при верстке лендингов и сайтов на 3-5 страниц, то лучше не отвечайте ))

Вам нужно создать 1 обыкновенный банан, а вы делаете гориллу с бананом и джунгли в придачу. А потом удивляетесь, когда на вас косо поглядывают.

 

А какая разница где бэм именование классов применять ? И почему нельзя в лендингах,

вы правда понимаете о чем бэм ?

[advokatua]

А какая разница где бэм именование классов применять ?

 

ой, всё  

Edited April 26, 2015 by advokatua