Почему выполняется условие?

Question

[zahar_92]

Всем привет!
Я не силен в JS и jQuery и не могу понять почему все время выполняется условие, если у родителя нет класса active. Задача, чтобы при наличии класса active у родителя a.light-link появлялся block-2, а block-1 исчезал. С приведенным кодом условие if все время верное, хотя класса active нет.

<ul>
<li class="sp-menu-item"><a class="light-link" href="/url1">Ссылка 1</a></li>
<li class="sp-menu-item"><a href="/url2">Ссылка 2</a></li>
</ul>
<div class="block-1">Текст 1</div>
<div class="block-2">Текст 2</div>

if ($('a.light-link').parent('li.active')) {
  $('.block-2').show();
  $('.block-1').hide();
} else {
  $('.block-2').hide();
  $('.block-1').show();
}

Answer 1

[Sergey Epifanov]

метод parent возвращает объект. Попробуйте проверить свойство length

if ($('a.light-link').parent('li.active').length)

Comments

[zahar_92]

Заработало, спасибо! А не подскажете как в это же условие засунуть наведение курсора мыши. Т.е. условие такое: если класс active или навели мышь на a.light-link, то показать block-2 ?

[Dima Polos]

zahar_92, подписаться на событие mouseover.
Вообще вместо проверки length советую использовать метод jQuery hasClass, будет точнее.
Вот ссылка на то, что умеет jQuery: jquery.page2page.ru/p2p/ifr.html

[zahar_92]

Dima Polos, спасибо, с hasClass тоже работает как надо. На счет mouseover верно ли я сделал? При таком коде block-2 отображен не зависимо от положения курсора.

if ($('a.light-link').parent('li').hasClass('active')) {
  $('.block-2').show();
  $('.block-1').hide();
} else if ($('a.light-link').mouseover()) {
  $('.block-2').show();
  $('.block-1').hide();
} else {
  $('.block-2').hide();
  $('.block-1').show();
}

[Sergey Epifanov]

zahar_92, так делать неправильно. посмотрите примеры с mouseover здесь: https://api.jquery.com/mouseover/

[zahar_92]

Sergey Epifanov, тогда я не понимаю как мне функцию засунуть в условие?

$( "#outer" ).mouseover(function() {
  $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});

[Sergey Epifanov]

zahar_92, не нужно засовывать функцию в условие. просто навесьте обработчик на элемент

[zahar_92]

Sergey Epifanov, Говорю же не селен в JS, все делаю с помощью гугла, методом проб и ошибок. "навесьте обработчик на элемент" мне мало что говорит. Где можно прочитать, как это делается в моем случае?

[Sergey Epifanov]

zahar_92, вы сами привели пример того, как этого делается.

$( "#outer" ).mouseover(function() {
  $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
});

укажите свой элемент вместо $( "#outer" ) , а в теле функции, которая передается в mouseover , делайте то, что вам нужно

[zahar_92]

Sergey Epifanov, спасибо, разобрался!

[Standalong]

Для подробного разъяснения причины:

Причина получения такого результата в том, что $('a.light-link').parent('li.active')) возвращает набор элементов – родителей, имеющих 'li.active'. Отсутствие элементов с li.active означает, что этот набор имеет нулевую длину, но он существует, а значит, условие всегда будет выполняться.
Поменяйте этот код на какой-нибудь совершенно абсурдный, например - ($('p').parent('000000')), и увидите, что условие тоже всегда будет выполняться.
Вот если бы вы проверяли значение свойства какого-то элемента из полученного набора, тогда бы условие стало реально рабочим.

В качестве решения:
Используйте .hasClass, оно возвращает True или false