Дайте нескольким div одну и ту же функцию

Я хочу создать несколько миниатюр с одним и тем же .class. Div миниатюры содержит 3 других div. Первый — это изображение, второй — описание, которое появляется при вводе мыши, а третий — полоса, которая меняет непрозрачность.

Когда указатель мыши находится над .thumbnail, оба элемента должны выполнить свою функцию.

Моя проблема в том, что теперь каждая миниатюра выполняет функцию, поэтому каждая миниатюра теперь выделена. Как я могу изменить это, чтобы при наведении курсора на него выделялась только одна миниатюра?

HTML:

<div class="thumbnail">    
    <div class="thumbnail_image">
        <img src="img/Picture.png">
    </div>

    <div class="thumbnail_describe">
        <p>Description</p>
    </div>

    <div class="thumbnail_footer">
        <p>Text</p>
    </div>
</div>

jQuery:

$(document) .ready(function() {

var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')

//mouseover thumbnail_describe
$thumb.mouseenter(function() {
    $thumb_des.fadeTo(300, 0.8);
});

$thumb.mouseleave(function() {
    $thumb_des.fadeTo(300, 0);
});


//mouseover thumbnail_footer
$thumb.mouseenter(function() {
    $thumb_ft.fadeTo(300, 1); 
});

$thumb.mouseleave(function() {
    $thumb_ft.fadeTo(300, 0.8);
});

});

javascript html jquery fadeto
person alex    schedule 23.01.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Ваш код ведет себя так, потому что вы применяете функцию fadeTo к селекторам $thumb_des и $thumb_ft, которые содержат соответственно все описания и нижние колонтитулы страницы.

Вместо этого вы должны выбрать описание и нижний колонтитул миниатюры, вызывающей событие мыши, внутри функций mousenter или mouseleave.

Еще одна вещь, которую вы можете изменить для оптимизации своего кода, — использовать только один раз функции прослушивания событий и одновременно выполнять как действия над описанием, так и над нижним колонтитулом:

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

полный рабочий jsfiddle: http://jsfiddle.net/Yaz8H/

person Mehdi    schedule 23.01.2014

arrow_upward
0
arrow_downward

Когда вы делаете:

$thumb_des.fadeTo(300, 0.8);

он затухает все узлы в $thumb_des. Что вы хотите, так это исчезнуть только тот, который соответствует правильному узлу в $thumb.

Попробуй это:

for (i = 0; i < $thumb.length; i++)
{
    $thumb[i].mouseenter(function (des) {
        return function() {
            des.fadeTo(300, 0.8);
        };
        }($thumb_des[i]));
    });
}
person pid    schedule 23.01.2014

arrow_upward
0
arrow_downward

Вы захотите получить доступ к дочерним объектам этой конкретной миниатюры, что-то вроде этого будет работать:

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

Вот пример скрипки.

person Goose    schedule 23.01.2014