getElementById - это один из тех вызовов, который на самом деле делает то, что говорит.:-) Он получает элемент DOM по атрибуту id.Поскольку id должен быть уникальным, он дает вам один конкретный элемент, с которым вы затем можете взаимодействовать (например, устанавливая его свойства стиля).
Поэтому часть вашей проблемы состоит в том, что у вас есть два элемента с идентификатором«textpan» и два элемента с идентификатором «imgsrc», что означает, что браузер будет делать что-то неопределенное, потому что вы не можете сделать это .
В обработчике событий,this будет указывать на элемент, на который вы поместили обработчик.Таким образом, в ваших функциях highlight и removeHighlight вы можете использовать this (вместо getElementById), чтобы получить ссылку на элементы img DOM.Это просто оставляет текстовые единицы.
Вы можете использовать соглашение об именах (например, "languagespan1" и "imgsrc1", textpan2 "и" imgsrc2 "), поэтому обработчики будут выглядеть так:
function hightlight()
{
var textid = this.id.replace("imgsrc", "textspan");
var text = document.getElementById(textid);
text.style.color = "blue";
this.style.border = "1px solid blue";
}
function removehightlight()
{
var textid = this.id.replace("imgsrc", "textspan");
var text = document.getElementById(textid);
text.style.color = "black";
this.style.border = "0px solid blue";
}
... или вы можете использовать атрибут (скажем, data-text) в тегах img, который дает идентификатор текстового поля, связанного с ним;Вы можете получить атрибут из элемента DOM, например, так:
var textid = this.getAttribute("data-text");
Пользовательские атрибуты недопустимы в HTML4 и ниже, но я никогда не встречал браузер, у которого были проблемы с ними.В HTML5 и выше вы можете иметь пользовательские атрибуты, если они начинаются с data-, как указано выше.Поэтому, если validation является частью вашей рабочей практики (и это, как правило, хорошая идея), вы можете подумать о том, чтобы начать использовать тип документа HTML5, если у вас нет особой причины остаться с предыдущим (как, например, например,вам неудобно использовать doctype для версии HTML5, которая еще не достигла стадии рекомендации кандидата).Многие из нас достаточно счастливы, чтобы идти вперед .
this - это не то, как вы подключаете обработчики.Я забыл, я давно не использовал способ подключения обработчиков DOM0 (onmouseover=).Но ниже работает:
или , из-за того, как вы подключаете обработчики, вы можете передать аргумент в функции, сообщая им, с кем они имеют дело:
function hightlight(index)
{
var img = document.getElementById("imgsrc" + index);
var text = document.getElementById("textspan" + index);
text.style.color = "blue";
img.style.border = "1px solid blue";
}
function removehightlight(index)
{
var img = document.getElementById("imgsrc" + index);
var text = document.getElementById("textspan" + index);
text.style.color = "black";
img.style.border = "0px solid blue";
}
... где ваши атрибуты onmouseover и onmouseout изменяются на:
onmouseover="hightlight(1);" onmouseout="removehightlight(1);"
onmouseover="hightlight(2);" onmouseout="removehightlight(2);"
Вот живой пример .
Примечание : Код, который вы нашли, использует события mouseover и mouseout.Имейте в виду, что те, кто не вполне делают то, что вы ожидаете, они делают, и это может вас укусить, хотя конкретный способ их использования в основном отлично (выделать больше работы, чем необходимо, но это нормально).Но предположим, что ваша разметка немного изменилась:
<a href="#" class="btn-list"><span id="textspan" onmouseover="hightlight()" onmouseout="removehightlight()">11 <strong>Gurney</strong> Drive</span><br /></a>
Теперь в пределах промежутка есть элемент, на котором вы наблюдаете эти события.Это означает, что когда мышь пользователя перемещается слева направо, вы увидите события series из mouseover, когда мышь перемещается над текстом «11 (пробел)», тогда ваш код будетувидеть событие mouseout, когда мышь переместится в слово "Gurney".Почему это происходит?Потому что мышь переместилась из из span и в strong элемент.Затем он сразу увидит еще один mouseover, потому что мышь перемещается над элементом strong, а событие mouseover всплывает в DOM, поэтому мы видим его на span.Это может вызвать мерцание, когда мышь входит и выходит из элемента strong.
В Internet Explorer есть события mouseenter и mouseleave, которые больше подходят для того, что вы делаете, но ктохочет использовать события, которые ограничены только одной маркой браузера?Ну, большинство хороших библиотек JavaScript эмулируют эти события даже в браузерах, которые не поддерживают их изначально, что приводит меня к ...
Не по теме 1 :
Если вы только начинаете использовать JavaScript в браузерах, предупреждаю: есть ряд несоответствий и неловкости браузера (если это слово), которые библиотеки, такие как jQuery , Prototype, YUI , Закрытие или Любой из нескольких других может сгладить для вас.За то, что вы делаете в этом вопросе, они не принесут огромной пользы.Но для более сложных вещей они могут сэкономить вам много времени и хлопот, используя хорошую работу, которую многие другие сделали до вас.Как, например, эмуляция mouseenter и mouseleave в браузерах, которые их не поддерживают.:-) Я точно знаю, что jQuery и Prototype делают это для вас, и я подозреваю, что другие тоже делают.
Не по теме 2 :
Это "выделите », а не« выделите ».Если кому-то понадобится позже поддержать ваш код, эта опечатка (которая непротиворечива, и поэтому не является ошибкой!) Вполне может сбить его с толку.Отдельно, стандартная практика (которую вы можете игнорировать!) - использовать слова camelCase в именах функций, поэтому removeHighlight вместо removehightlight.FWIW.