Состояние зависания Jquery зависит от имени класса

Это немного сложно объяснить, но я пытаюсь добиться применения класса / CSS к группе div с одинаковым именем класса. В частности, это будет галерея с миниатюрами. Все они появляются вместе, но сгруппированы по имени класса. При наведении курсора на изображение для определенного класса все изображения одного и того же класса остаются непрозрачными, а остальные изменяют свою непрозрачность. Возможно, этого можно достичь, изменив отображение оверлея div?

По сути, мне нужен какой-то способ отображения div с одним и тем же классом одинаковым образом, независимо от имени их класса при наведении курсора.

Если бы кто-нибудь мог указать мне правильное направление, я был бы очень благодарен!

Например (при наведении курсора на любой из классов 1 они непрозрачны, класс 2 прозрачен и наоборот):

<div class="thumbnail 1">
<img>
</div>
<div class="thumbnail 1">
<img>
</div>
<div class="thumbnail 2">
<img>
</div>
<div class="thumbnail 2">
<img>
</div>
Источник

3 ответа

Решение

Вы можете сделать это легко с помощью jQuery. Этот код будет работать для любой группы элементов и классов; Вам не нужно знать, какие уроки будут заранее. Он просто находит все элементы, которые не имеют класса того, над которым вы зависли, и затемняет их.

Если это ваш HTML:

<span class="a">a</span>
<span class="a">b</span>
<span class="a">c</span>
<span class="b">d</span>
<span class="b">e</span>
<span class="b">f</span>

..то этот jQuery должен работать нормально.

$('span').hover(function() {
    var theClass = $(this).attr('class');
    $('span:not(.' + theClass + ')').animate({'opacity': 0.2}, 300);
}, function() {
    $('span').animate({'opacity': 1}, 300); //restore all spans to 100% opacity
});

Живой пример jsFiddle здесь.

Источник

Должно быть легко сделать. Не написав всю функцию для вас, селекторы просты:

$('div.hoverclass').hover(function() { 
  // any other logic you need to sort out
  $('img.imageclass').not('.hoverclass').doOpacityStuff();
});

Где "hoverclass" - это класс, общий для группы div с соответствующими изображениями, "imageclass" - это класс, который разделяют все изображения с этой функцией зависания (чтобы вы не влияли на другие значки и несвязанные изображения), и "doOpacityStuff()"- это точка, в которой вы можете связать другие ваши функции прозрачности.

Источник

Поскольку ваши классы генерируются динамически, вы сначала захотите получить класс текущего элемента, а затем, если хотите что-то сделать с элементами, которые не принадлежат классу:

$('div').hover(function () {
  // Get the class
  var selector = $(this).attr('class');
  $('div:not(' + selector + ')').each( function () {
    //...
  });
});

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

Для получения дополнительной информации о не-селекторе, посетите веб-сайт API jQuery.

Источник
Другие вопросы по тегам