Проблема с JS, DOM и зацикливанием

Question

У меня проблема с зацикливанием JavaScript и DOM.

, поэтому у меня есть несколько div-ов, у каждого есть фоновое изображение, определенное CSS, однако, когда я переключаю текстовую ссылку, я хочу, чтобы эти фоновые изображенияизменить, какие из них будут меняться, зависит от их имени класса и ссылки mouseover'ed

<div id="im1" class="web"></div>
        <div id="im2" class="logo"></div>
        <div id="im3" class="web"></div>
        <div id="im4" class="logo"></div>
        <div id="5" class="logo"></div>

<a href="#" onmouseover="showweb()" onmouseout="hideweb()">web</a>

, так что это div с моей ссылкой для наведения мыши.затем, чтобы изменить эти изображения, у меня есть простой JavaScript, который прекрасно работает (если он очень длинный) ....

function showweb() {
document.getElementById("im1").style.backgroundImage = "url('back/1col.png')";
document.getElementById("im2").style.backgroundImage = "url('back/2col.png')";

однако, я подумал, есть ли способ, которым я бы обусловил имя класса, и толькоизмените те с определенным именем класса, например, веб или логотип.Я пробовал разные способы, петли и тому подобное, но ни один из них не помог.например,

    function showweb() {
for(i=0; i=5; i++){
    url = "im" + i;
    if(document.getElementById("url").className=="web"){
    document.getElementById("url").style.backgroundImage = "url('back/"+ i +"col.png')";}
    }
}

однако это не работает, div просто не меняется ..... я делаю что-то не так?что-то упустил?или делать это совершенно неправильно?

вся помощь оценена, спасибо заранее.

Редактировать: изменил "URL" на URL, мой плохой, это было оченьглупо, однако все еще не сработало.Я постараюсь опубликовать несколько других идей.спасибо всем до сих пор.

Answer 1

Вам не нужны кавычки вокруг url:

document.getElementById(url)

Answer 2

У вас есть несколько проблем. Во-первых, у вас есть кавычки вокруг переменной "url", поэтому он ищет элемент с таким идентификатором, который не существует и, таким образом, завершается неудачно, когда вы пытаетесь получить доступ к className результата нулевого поиска. Во-вторых, ваш цикл начинается с 0, а не с одного, и у вас нет div с идентификатором «im0», поэтому он все равно не сможет работать, когда вы попытаетесь получить className этого элемента, которого также не существует. В-третьих, проверка в вашем цикле устанавливает для i значение 5 вместо проверки, меньше или равно 5. Ваш цикл с таким образом продолжается вечно, поскольку 5 соответствует true , что, я уверен, не то, что ты хочешь. В-четвертых, ваш код может сломаться, если вы назначите дополнительные классы элементам. Наконец, большинство подобных вещей уже сделано для вас - могу ли я предложить вам изучить использование javascript-фреймворка, такого как jQuery, с методом hover (), в качестве лучшей альтернативы, чем повторное изобретение колеса, если это не чисто учебное упражнение.

Answer 3

Это может сработать (если ссылка на ваши изображения верна и подразумевается, что под id="5" вы подразумеваете id="im5". Играйте с ней, пока она не станет правильной. Проверяйте свой код, были обнаружены несколько ошибок (опечатки или хуже ¹ ) в вашей кодировке:

function showweb() {
for(var i=1; i < 6; i++){
    var el = document.getElementById("im"+(i));
    if(el && /web/.test( (el ||{}).className)){
      el.style.backgroundImage = "url(back/"+ i +"col.png)";}
    }
}

¹ несколько замечаний по этому поводу

• id = "5" должно быть id ="im5"
• i=0; i=5; i++ => i=5 должно быть i<5
• i=0; i=5; i++ создает глобальную переменную i. Используйте var i=0;...
• учитывая ваши идентификаторы, вы должны начать с var i = 1
• хотя это и не настоящая ошибка, вам не нужно заключать в значение url апострофы
• для оптимизации вызова document.getElementById один раз и использования его результата в оставшейся части кода

Answer 4

Чтобы получить только элементы нужного класса, вам нужно node.getElementsByClassName('your_class'), где node может быть document или несколько <div>, выбранных по id, или любой другой узел дерева DOM.

Примечание: Помните, что все методы, которые начинаются с getElement, будут возвращать один элемент, а методы с getElements будут возвращать массив элементов, поэтому этот метод возвращает массив, который необходимо перебрать (даже если есть только один элементв нем)

Однако, поскольку вы работаете с элементами DOM в JavaScript, вы бы сэкономили массу времени, используя jQuery

Answer 5

Вы создаете переменную "url", но затем передаете строковую константу "url" в функцию "getElementById ()".