Я пытаюсь добавить простую задержку к событию наведения указателя мыши на ребенка и испытываю трудности. (Все еще учусь!)

Это позволяет мне показывать всплывающее окно после задержки, но показывает их все одновременно:

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

И это работает, чтобы без задержки показывать только то всплывающее окно, которое я хочу:

onmouseover='$(this).children(\".skinnyPopup\").show()'

Но комбинация не делает:

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

Любая помощь будет оценена. Благодарность!

4
TLK 7 Сен 2010 в 22:44

2 ответа

Лучший ответ

Вам нужно определить, что такое this при выполнении, примерно так:

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

Или просто используйте .delay(), например так:

$(this).children(".skinnyPopup").delay(600).show(0);

Оба вышеперечисленных решения являются быстрыми, я предлагаю вам отказаться от встроенных обработчиков и проверить ненавязчивый (см. этот ответ от Russ Cam по некоторым веским причинам), например:

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});
4
Community 23 Май 2017 в 10:30

Это потому, что this привязан к глобальному контексту, а не к элементу. Вместо этого используйте что-то вроде следующего:

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

Если вы непреклонны в отношении встроенных обработчиков событий, следующее также должно работать:

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'
0
Cristian Sanchez 7 Сен 2010 в 18:45