Как скрывать дочерний элемент, если у родителя есть определённый класс?

Question

[saplas]

Есть скрипт, в теории он должен проверять наличие класса active и скрывать одну из двух картинок если родитель с классом active.

$(document).ready(function() {
        if($('.services-link').hasClass('active')){
            $('.blackimg').css({'display' : 'none'});
	    $('.whiteimg').css({'display' : 'block'});
        }
    });

Но постоянно одна картинка whiteimg даже если нет класса active

Comments

[Артем Чернявский]

Answer 1

[Сергей Соколов]

Попробуйте так:

$(document).ready(function() {
  $('.services-link').each( function(){
    if ($(this).hasClass('active')){
      $('.blackimg', this).hide();
      $('.whiteimg', this).show();
    } else {
      $('.blackimg', this).show();
      $('.whiteimg', this).hide();
    }
  })
});

Приведите разметку, а лучше сделайте jsFiddle, демонстрирующий проблему.

Вроде, работает:

песочница

Точно ли вам надо решать эту задачу с помощью JS? Можно же стилями прятать/показывать, в зависимости от родительского класса. Что-то типа

.services-link .blackimage {display: block}
.services-link.active .blackimage {display: none}
.services-link .whiteimage {display: none}
.services-link.active .whiteimage {display: block}

Comments

[saplas]

https://jsfiddle.net/603zkn87/

[Сергей Соколов]

saplas, сделайте просто стилями

[saplas]

Сергей Соколов, Премного благодарен