Почему не работает if с jquery?

Question

[Никита Нафранец]

if (!$(".news__image-block").hasClass('open')) {
		$('.news__image').hover(function() {
			$(this).children('.news__image-block').toggleClass('half-open');
			$(this).parents('.news__item').children('.news__text').children('.news__text-bottom').children('.news__text-next').toggleClass('invert');
		});
	}

Такая конструкция у меня не работает, почему? Я хочу, чтоб скрипт внутри кода не работал, если у элемента есть класс open, а он все равно работает. И почему не работает .children(".news__text > .news__text-bottom") ? Заранее спасибо.
Update
Всем спасибо, смог исправить положение при помощи :not и двойном toggleClass.

Comments

[Дмитрий Еремин]

css еще приложите, пожалуйста

Answer 1

[Никита Нафранец]

Проблема была в том, что hover работал, когда не должен был работать. С помощь :not(.open) я смог заставить hover не работать при классе open.

Answer 2

[trevoga_su]

jquery.page2page.ru/index.php5/%D0%9D%D0%B0%D0%BB%...

Проверяет наличие класса className у выбранных элементов страницы. Если хотя бы один из элементов содержит этот класс, то функция вернет true, иначе вернет false.

Comments

[Юрий Шилка]

читать доки всегда хорошая идея (я не тс)

[Никита Нафранец]

Простите, я не понял. К чему вы это скинули? Я вроде бы как раз и использую hasClass, чтоб узнать есть ли класс этот у данного элемента или нет. Я сделал отрицание и т.е. мне должно вернуть false. Если возвращает false, код не выполняется, если возвращает true, то код выполняется. Т.е. Я сделал проверку на то, чтоб когда у элемента есть класс Open, то он не должен выполнять код. Прежде чем обратиться на тостер, я залез в api JQ и нужного ответа я не нашел.

[trevoga_su]

Никита Нафранец: к тому, что чудес не бывает. И у вас не работает отрицание по причине того, что "один из элементов содержит этот класс".

Answer 3

[Дмитрий Еремин]

Я в этом плане, конечно, не электрик, но что, если навесить еще скобок вот так:

if (!($(".news__image-block").hasClass('open'))) {
    $('.news__image').hover(function() {
      $(this).children('.news__image-block').toggleClass('half-open');
      $(this).parents('.news__item').children('.news__text').children('.news__text-bottom').children('.news__text-next').toggleClass('invert');
    });
  }

Вторая идея - вот так:

$('.news__image').hover(function() {
  if (!($(".news__image-block").hasClass('open'))) {
     $(this).children('.news__image-block').toggleClass('half-open');
     $(this).parents('.news__item').children('.news__text').children('.news__text-bottom').children('.news__text-next').toggleClass('invert');
  }
});

Ну т.е. закинуть if внутрь обработчика

Comments

[Никита Нафранец]

Больше скобок богу скобок не помогло.

[Дмитрий Еремин]

Никита Нафранец: ну попробовать стоило
А вторая идея? Только селекторы поправить, наверное надо. Но я не уверен - я не в контексте

[Никита Нафранец]

Дмитрий Еремин: вторая идея хоть как-то реагируют, но она не работает по моей логике. Я просто хочу, чтоб .hover() не работал у элемента, если есть у него есть класс open, а если нет, то работал.

[Никита Нафранец]

Дмитрий Еремин: Теперь странно работает, я в вопросе написал весь код. У меня идея такая, нажимаешь на картинку, она растягивается на весь экран и выкидывает описание из под нее. Но если не нажать, а навести ховер, то она растягивается на часть экрана. Дело в том, что обычный css :hover не зайдет, потому, что элемент должен растягиваться на часть экрана и при наведении на картинку и при наведении на кнопку, которая тоже растянет картинку на весь экран.

[Дмитрий Еремин]

Никита Нафранец: ну здесь, как я говорил, нужно теперь еще раз переосмыслить логику внутри if. Может быть, написать с нуля, чтобы быть уверенным. Например, я сейчас не могу однозначно сказать, что конкретно содержится в this - .news__image или .news__image-block?

[Никита Нафранец]

Дмитрий Еремин: Логика такова есть 2 активатора сама картинка и кнопка, при нажатии на кнопку выплывает спрятанный блок снизу, картинка расширяется на весь экран. Так как кнопка и картинка находятся в разных блока и глубоко в DOM, то я сначала нахожу эти кнопки, когда я на них нажал, то исходя от этих кнопок нахожу их родителей (news__item), а от родителей уже нахожу нужные блоки которым надо применить класс open.

[Никита Нафранец]

Дмитрий Еремин: Добавил в вопрос гифку с анимацией.

[Дмитрий Еремин]

Никита Нафранец: не отображается. И добавьте css - я пытаюсь воспроизвести всю вашу историю

[Никита Нафранец]

Дмитрий Еремин: codepen.io/dimensi/pen/PNdYQO

[Никита Нафранец]

Дмитрий Еремин: Я хочу, чтоб картинка не сжималась, когда она открыта во весь экран, т.е., чтоб класс half-open не добавлялся.

Answer 4

[Юрий Шилка]

$(".news__image-block") возвращает массив элементов, поэтому результат операции будет всегда true -
нужно пройтись по результатам массива
с $(this).children, похоже, такая же история

Comments

[Никита Нафранец]

если в консоле написать $(".news__image-block").hasClass('open') и класса у элемента нет, то мне вернет false, а не true.