JQuery, как применить один и тот же эффект наведения мыши к нескольким элементам div с одинаковыми классами?Помогите, пожалуйста? - PullRequest
Новая
       22

JQuery, как применить один и тот же эффект наведения мыши к нескольким элементам div с одинаковыми классами?Помогите, пожалуйста?

2 голосов
/ 18 сентября 2010

Я новичок в jQuery, и у меня возникли некоторые проблемы с опрокидыванием, я пытаюсь применить один и тот же эффект "пролонгации" к нескольким элементам div, и, похоже, это работает, единственное, когда я переворачиваю элемент всемои дивы получают тот же эффект, когда я хочу, чтобы они применяли эффект по одному на мышь, вот мой код 

  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-tab').toggleClass('pheader-bar-selected');
  });
  $('div.pitem').bind('mouseenter mouseleave', function() {
  $('div.p-fline').toggleClass('pfooter-bar-selected');
  });

Я понимаю, что у меня есть те же классы на всех моихdivs, но я надеялся найти способ сделать это без предоставления каждому div уникального класса или идентификатора, любая помощь будет удивительной, спасибо!

Ответы [ 2 ]

2 голосов
/ 18 сентября 2010

Вы можете взглянуть на $ (это).

Объяснено по адресу: http://remysharp.com/2007/04/12/jquerys-this-demystified/

Вот как я использую это, чтобы дать вам пример 

// megalink hover
$("div.megalink").hover(function(){
    $(this).css('background','#e1eefd');
    $(this).css('border-bottom','1px solid #0470B8');
 }, function(){
    $(this).css('background','#ffffff');
    $(this).css('border-bottom','1px solid #EBE7DE');
});
0 голосов
/ 18 сентября 2010

То, что вы делаете в данный момент, происходит при каждом наведении курсора на класс CSS для всех элементов, выбранных с помощью div.p-tab, который будет любым DIV с p-tab класса CSS.

Что вы хотите сделатьэто только переключение класса CSS на элементы рядом с элементом hovered в вашей структуре HTML div.pitem.

Чтобы найти текущий элемент нахождения, в вашем событии используйте ключевое слово this и превратите его в объект jQueryиспользуя $(this).Чтобы найти элементы рядом с (смежными), вы будете использовать функцию siblings.Вы также можете объединить два события при наведении. 

$('div.pitem').bind('mouseenter mouseleave', function() { 
    $(this).siblings('div.p-tab').toggleClass('pheader-bar-selected');
    $(this).siblings('div.p-fline').toggleClass('pfooter-bar-selected');
}); 


<div class="grid_3 portfolio-item">
    <div class="p-tab pheader-bar">
        <span class="tfm-drpa">&raquo;</span>
    </div>
    <div class="pitem">
        <a href="#"></a>
    </div>
    <h2 class="pcontent">Consectetuer Adipiscing Elit<span class="ptitlelines">///</span></h2>
    <div class="p-fline pfooter-bar"></div> 
</div>
...