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

Question

Это немного сложно объяснить, но я пытаюсь добиться применения класса / 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>

Answer 1

Вы можете сделать это легко, используя 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
});

Пример Live jsFiddle здесь.

Answer 2

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

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

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

Answer 3

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

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

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

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