Создание цикла из серии событий onMouseOver - PullRequest
Новая
       30

Создание цикла из серии событий onMouseOver

0 голосов
/ 29 декабря 2011

как я могу создать цикл из этой функции. 

window.onload = function makeHalo() {
    document.getElementById("d1").onmouseover = function() {
        this.id ="d1On";
        this.className="hover";
        document.getElementById("menu1").style.color="#6DC5E6";
    };
    document.getElementById("menu1").onmouseover = function() {
        this.style.color="#6DC5E6";
        document.getElementById("d1").className="hover";
        document.getElementById("d1").id="d1On";
    };

    document.getElementById("d1").onmouseout = function() {
        this.id ="d1";
        this.className="";
        document.getElementById("menu1").style.color="#FFFFFF";
    };
    document.getElementById("menu1").onmouseout = function() {
        this.style.color="#FFFFFF";
        document.getElementById("d1On").className="";
        document.getElementById("d1On").id="d1";
    };

    document.getElementById("d2").onmouseover = function() {
        this.id ="d2On";
        this.className="hover";
        document.getElementById("menu2").style.color="#6DC5E6";
    };
    document.getElementById("menu2").onmouseover = function() {
        this.style.color="#6DC5E6";
        document.getElementById("d2").className="hover";
        document.getElementById("d2").id="d2On";
    };

    document.getElementById("d2").onmouseout = function() {
        this.id ="d2";
        this.className="";
        document.getElementById("menu2").style.color="#FFFFFF";
    };
    document.getElementById("menu2").onmouseout = function() {
        this.style.color="#FFFFFF";
        document.getElementById("d2On").className="";
        document.getElementById("d2On").id="d2";
    };
}

Функция в значительной степени изучает идентификатор изображения при его наведении, изменяет идентификатор этого элемента, добавляет класс к элементу и меняет цвет другого элемента

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

onmouseout просто сбрасывает все.

На фактической HTML-странице это страница меню со списками. Ниже есть карта континента, которая является фоновым изображением. Когда вы наводите курсор мыши на элемент списка, он меняет точку на карте с другим изображением для индикатора. Вы также можете навести точки на карте, чтобы изменить цвет ссылок в списках.

Я попытался сделать что-то подобное, но цикл переходит только к последней итерации для некоторых элементов. Ссылки меняют цвет в порядке, но это только поменяет картинку на «d43», независимо от того, какую ссылку я наведу. 

window.onload = function makeHalo() {
    var i = 1;
    for (i=1; i<44; i++) {
        var menu = "menu"+i;
        var d = "d"+i;
        var On = "d"+i+"On";
        document.getElementById(d).onmouseover = function() {
            this.id = On;
            this.className="hover";
            document.getElementById(menu).style.color="#6DC5E6";
        };
        document.getElementById(menu).onmouseover = function() {
            this.style.color="#6DC5E6";
            document.getElementById(d).className="hover";
            document.getElementById(d).id=On;
        };

        document.getElementById(d).onmouseout = function() {
            this.id = d;
            this.className="";
            document.getElementById(menu).style.color="#FFFFFF";
        };
        document.getElementById(menu).onmouseout = function() {
            this.style.color="#FFFFFF";
            document.getElementById(On).className="";
            document.getElementById(On).id=d;
        };
    }
}

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

Спасибо.

Ответы [ 3 ]

2 голосов
/ 30 декабря 2011

Основная техническая проблема, с которой вы сталкиваетесь, заключается в том, что вы создаете замыкания в цикле. Каждый из этих обратных вызовов закрывается над одинаковой i переменной, значение которой будет одинаковым для каждого из обратных вызовов (его значение после последней итерации). Это исправлено путем обертывания тела цикла в его собственную функцию, которая получает i в качестве аргумента, создавая локальную копию на каждой итерации.

Существует также ряд проблем со стилем и производительностью:

  • Тела этих обратных вызовов во многих случаях абсолютно одинаковы (пары mouseover и mouseout заканчиваются на одной и той же работе в каждом блоке).
  • Вы получаете одни и те же элементы по идентификатору несколько раз. Это не нужно; Вы должны сохранить ссылку.
  • Вы определяете состояние элемента, изменяя его идентификатор. Это обычно не то, как вы хотите справиться с этим. Идентификатор не должен меняться.

Я бы написал это примерно так (обращаясь к проблеме закрытия и первым двум пунктам выше) (не обращаясь к проблеме идентификации): 

for (var i = 1; i <= 2; i++) {
    (function(i) {
        var d = document.getElementById("d" + i);
        var menu = document.getElementById("menu" + i);
        d.onmouseover = menu.onmouseover = function() { 
            d.id = "d" + i + "On"; 
            d.className = "hover";
            menu.style.color = "#6DC5E6";
        };
        d.onmouseout = menu.onmouseout = function() { 
            d.id = "d" + i; 
            d.className = "";
            menu.style.color = "#FFFFFF";
        };
    })(i);
}

Это обрабатывает только два элемента; просто измените максимальный цикл, чтобы он работал больше.

Рабочее демо можно посмотреть здесь:

0 голосов
/ 30 декабря 2011

Здесь JavaScript не нужен ... просто используйте псевдокласс CSS :hover.

Но, чтобы ответить на ваш вопрос:

  • Не меняйте идентификатор вашего элемента. Это кажется в корне неверным. Вместо этого измените, добавьте или удалите класс. Что вы пытаетесь сделать, изменив идентификатор?
  • Не отслеживайте идентификаторы, просто отслеживайте ссылки на элементы напрямую.
  • Самое главное, когда вы выполняете цикл, к моменту вызова функций значение i равно 45, для всех элементов. Решите это, передав i функции, которая создает ваши обработчики событий: 
window.onload = function makeHalo() {  
    for (var i = 1; i < 44; i++) {
        (function (i) {
            var menu = document.getElementById("menu" + i);
            var d = document.getElementById("d" + i);
            function over () {
                d.className = "hover";  
                menu.style.color = "#6DC5E6";  
            }
            d.onmouseover = over;
            menu.onmouseover = over;

            function out () {  
                d.className = "";  
                menu.style.color = "#FFFFFF";  
            }
            d.onmouseout = out;
            menu.onmouseout = out;
        })(i);
    }  
}
0 голосов
/ 29 декабря 2011

Ваш последний div в вашем HTML "d43" или "d44"?Ваш цикл будет проходить через d1 - d43, потому что у вас i <44, что означает, что когда мне будет 44, он выйдет из цикла и остановится на d43. </p>

Если вы хотите, чтобы он достиг d44, то либо изменитеусловие: i <= 44 или измените его на i <45 </p>

Кстати, есть причина, по которой вы не используете jQuery, это дизайн, чтобы сделать вещи, подобные этому, несколькими способами.Возможно, вы перечислили, что вы на самом деле пытались выполнить с помощью этого кода, например, будь то система меню или что-то, что мы могли бы предложить лучшие подходы.

...