jQuery $ (this) .next () не работает должным образом - PullRequest
Новая
       1

jQuery $ (this) .next () не работает должным образом

4 голосов
/ 24 февраля 2012

Я пытаюсь создать простой выпадающий список, который запускается при наведении курсора. Чтобы сэкономить на написании кода, я хочу воспользоваться селектором $ (this), но продолжаю сталкиваться с проблемой при попытке нацелить $ (this) на следующий элемент 'a'. Кто-нибудь знает правильный способ кодировать это, все еще используя селектор $ (это)?

В приведенном ниже коде, если я изменю $ (this) .next ('a') на $ ('. Base a'), код работает нормально, но тогда мне придется каждый раз писать один и тот же блок кода jQuery Я хочу использовать эту функцию, используя каждый раз другой селектор классов.

Код запроса: 

var handlerIn = function() {
var t = setTimeout(function() {
        $(this).next('a') <==== Problem is here
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(this).data('timeout', t);   
} ;

var handlerOut = function() {
clearTimeout($(this).data('timeout'));
$(this).next('a') <==== Problem is here
  .removeClass('active')
  .next('div')
  .slideUp();

};

$('.base').hover(handlerIn, handlerOut);

HTML код: 

<div id="info" class="base">
<a href="#" id="info-link" title=""></a>
        <div id="expanded-info">
               <!-- Stuff here -->              
         </div>
</div>

Так что я тоже безуспешно пытался ... любые идеи: 

var handlerIn = function(elem) {
var t = setTimeout(function() {
        $(elem).next('a') 
        .addClass('active')
        .next('div')
        .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
}, 400);
$(elem).data('timeout', t);   
} ;

var handlerOut = function(elem) {
clearTimeout($(elem).data('timeout'));
$(elem).next('a') 
  .removeClass('active')
  .next('div')
  .slideUp();

};
$('.base').hover(handlerIn($(this)), handlerOut($(this)));

Ответы [ 4 ]

2 голосов
/ 24 февраля 2012

JavaScript является областью действия, а не областью блока: 

var handlerIn = function() {
    var self = this;
    var t = setTimeout(function() {
        $(self).next('a')
            .addClass('active')
            .next('div')
            .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
        }, 400);
    $(this).data('timeout', t);   
};
0 голосов
/ 24 февраля 2012 
var handlerIn = function() {
    var $base = $(this);
    var t = setTimeout(function() {
        $base.next('a')
            .addClass('active')
            .next('div')
            .animate({'height':'show'}, {duration:'slow', easing: 'easeOutBounce'});
    }, 400);
    $base.data('timeout', t);   
};

var handlerOut = function() {
    var $base = $(this);
    clearTimeout($base.data('timeout'));
    $base.next('a')
        .removeClass('active')
        .next('div')
        .slideUp();

};

$('.base').hover(handlerIn, handlerOut);
0 голосов
/ 24 февраля 2012

Когда вы используете $ ('. Base a'), у вас нет следующего элемента, потому что a вложен внутри, вы должны использовать вместо него $ (this) .children ('a').

0 голосов
/ 24 февраля 2012

Попробуйте ввести $(this) в качестве параметра в функции hover, а затем измените все ваши вызовы $(this) в функциях вашего обработчика на параметр: 

$(".base").hover(handlerIn($(this)), handlerOut($(this)));

И ваши новые функции: 

function handlerIn( elem ){
    elem.next('a')
        .fadeIn(); // or whatever you plan on doing with it
}

То же самое понятие с handlerOut.

...