jQuery mouseenter / mouseleave html () - проблема подкачки - PullRequest
Новая
       16

jQuery mouseenter / mouseleave html () - проблема подкачки

4 голосов
/ 26 ноября 2010

У меня есть следующая функция Javascript / jQuery: 

function addEventHandler(){

    $("div").mouseenter(function() {
        $(this).html("Over");
    }).mouseleave(function() {
        $(this).html("Out");
    });

}

Это работает, но не идеально.Дивы иногда слегка перекрываются (не спрашивайте), и, как показано на рисунке ниже, они не всегда получают значение «Out».Это происходит, особенно если я очень быстро наведу указатель на них.

alt text

Есть идеи, как сделать так, чтобы каждый div получал значение "Out" при отпускании мыши?Спасибо!

ОБНОВЛЕНИЕ: фрагмент реального кода

Поскольку моя реальная функция не так проста, как в примере выше, я включил точный код реальногофункция здесь: 

function addEventHandlers(){

    var originalContent = "";

    $(".countryspots div").mouseenter(function() {

        var thisClass = $(this).attr("class");
        var thisCountry = thisClass.split(" ");
        var thisNumber = getNumber(thisCountry[1]);

        originalContent = $(this).children("a").html();

        $(this).children("a").html("<span>" + thisNumber + "</span>");


    }).mouseleave(function() {

        $(this).children("a").html(originalContent);

    });

}

И моя HTML-разметка выглядит следующим образом: 

<div class="countryspots">
    <div class="america brazil"><a href="#"><span>Brazil</span></a></div>
    <div class="america argentina"><a href="#"><span>Argentina</span></a></div>
    <div class="europe ireland"><a href="#"><span>Ireland</span></a></div>
    <div class="europe portugal"><a href="#"><span>Portugal</span></a></div>
</div>

Общая идея заключается в том, что название страны во внутренней части <span> заменяется на число, представляющеесотрудников на mouseenter (получено из getNumber();), а затем снова поменялись на mouseleave.

* * * * * * * * реальная проблема состоит в том, что многие дивы сохраняют номер своего сотрудника, когда я перемещаю указатель надругой див.Другими словами: событие mouseleave не выполняется для всех div.

Пример в реальном времени: http://jsfiddle.net/N9YAu/4/

Надеюсь, это поможет.Еще раз спасибо!

Ответы [ 3 ]

2 голосов
/ 26 ноября 2010

Ваша проблема в том, что для одной у вас есть только одна переменная для хранения «оригинального содержимого» для всех элементов, а также обработчик mouseenter может быть вызван второй раз перед обработчиком mouseleave, вызывая значение «оригинал».переменная «content», которая будет перезаписываться содержимым при наведении.

Вы должны сохранять исходное содержимое один раз в начале сценария и сохранять его отдельно для каждого элемента.Я сделал это в следующем примере, используя функцию jQuery data: http://jsfiddle.net/N9YAu/5/

Примечание: я заменил ваши отдельные привязки mouseenter / mouseleave на одну привязку hover.В конце концов, вероятно, то же самое, но это «правильный способ» сделать это.

0 голосов
/ 26 ноября 2010

Будет ли какой-либо из этих элементов div вложен в другие элементы div в HTML случайно?

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

0 голосов
/ 26 ноября 2010

Я не смог воспроизвести проблему:

http://www.jsfiddle.net/N9YAu/1/

Это с тобой тоже происходит?

...