Эффект при наведении курсора мыши на кнопки радио


Я очень сильно Новичок и собрали некоторые JavaScript, чтобы управлять парой переключателей, которая, по сути, ведут себя как ссылки.

Я делаю это в качестве самостоятельного проекта, или поразвлечься. Я знаю, что мне не придется использовать радио-кнопки, но это то, что я хотела сделать.

Он просто проверяет кнопку радио, когда вы наведите на него курсор, и в то же время подчеркивает сопровождающий текст. Или выделяет текст при наведении на него, а также проверка сопроводительной кнопку радио.

Когда курсор выходит, больше не парит над элементами вернуться в обычное состояние.

Я чувствую, что там должен быть намного чище способ реализации этого.

Вот мои пометки из двух переключателей:

<form name=links>
    <div id="aaa">
        <input type="radio" name="fb" onMouseOut="out_event_01()" onMouseOver="over_event_01()" />
        <br /><span class="sl" id="fb_link" onMouseOut="out_event_03()" onMouseOver="over_event_03()">Button1</span>
    </div>
    <div id="bbb">
        <input type="radio" name="tw" onMouseOut="out_event_02()" onMouseOver="over_event_02()" />
        <br /><span class="sl" id="tw_link" onMouseOut="out_event_04()" onMouseOver="over_event_04()">Button2</span>
    </div>
</form>

Как видите, у меня много событий onMouseOut и onmouseover модели.

Это JavaScript-код, который я использую:

function over_event_01()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_01()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_02()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_02()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}
function over_event_03()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_03()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_04()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_04()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}


1699
3
задан 4 октября 2011 в 09:10 Источник Поделиться
Комментарии
2 ответа

Без переписывания всего кода у меня есть несколько предложений для вас:


  • Не использовать встроенный JavaScript (onMouseeOut, onmouseover модели) всегда использовать прослушиватели событий (я покажу вам, как в приведенном ниже примере кода). Причиной этого является двоякой: во-первых, он отделяет свой код JavaScript из HTML-вторых это делает код еще более ремонтопригодны, если вы измените слушателя, у вас есть одно место, чтобы посмотреть.

  • Использовать классы вместо встроенных стилей (по тем же вышеуказанным причинам)

    • это означает, заменить стиль=ХХХ с CSS класса (опять же я пример в коде ниже)


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

Поскольку вы новичок в JavaScript, я избежать некоторых промежуточных моделей, которые я думаю могут применяться здесь как оборачивать всю эту функциональность в сразу вызывается функция выражения (жизнь), но вы действительно должны прочитать эту статью Бен Алман http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Итак, давайте посмотрим как это может быть улучшено с некоторыми psudo код. Первый позволяет создать одну функцию-враппер, который будет инкапсулировать все ваши функции. Сначала установите некоторые функции переменные в одной и радиостанций. Затем мы придаем событий для большинства браузеров и старых версиях IE, затем мы создаем две универсальные функции для обработки ваших mouseenter и mouseleave. Эти функции будет выполнять дублировать логику проверки

function overOut(){
//these variables will be accessable by all the inner functions so we only declare them once
var fbLinks = document.links.fb,
twLinks = document.links.tw
fbLink = document.getElementById('fb_link'),
twLink = document.getElementById('tw_link');

//check for standard event listener
if(fbLink.addEventListener){
//here i'm assuming that fblinks are the links you want to highlight
fbLink.addEventListener("mouseover",radioOverFunction(this,fbLinks));
}
//ie events
else if(fbLink.attachEvent){
//here i'm assuming that fblinks are the links you want to highlight
fbLink.attachEvent("mouseover",radioOverFunction(this,fbLinks));
}

/***************************************************
* repeat the above code but for mouseout events *
***************************************************/

var radioOverFunction = function(radio,target){
//in here you would set check the radio and set the classname on the target
target.className = 'mouseOverClassName';
};

var radioLeaveFunction = function(radio,target){
//in here you would set check the radio and set the classname on the target
target.className = 'standardClassName';
}

}

6
ответ дан 4 октября 2011 в 01:10 Источник Поделиться

Вы могли бы, вероятно, начать отступ ваш код.

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

function hover_link(is_over, is_fb)
{
var links
if (is_fb)
links = document.links.fb;
else // tw
links = document.links.tw;
links.checked = true;
if (is_over)
document.getElementById('tw_link').style.color = 'black';
else // out
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}

Вы бы использовать его как это:

<form name=links>
<div id="aaa">
<input type="radio" name="fb" onMouseOut="hover_link(false, true)" onMouseOver="hover_link(true, true)" />
<br /><span class="sl" id="fb_link" onMouseOut="hover_link(false, false)" onMouseOver="hover_link(true, false)">Button1</span>
</div>
<div id="bbb">
<input type="radio" name="tw" onMouseOut="hover_link(false, true)" onMouseOver="hover_link(true, true)" />
<br /><span class="sl" id="tw_link" onMouseOut="hover_link(false, false)" onMouseOver="hover_link(true, false)">Button2</span>
</div>
</form>

5
ответ дан 4 октября 2011 в 11:10 Источник Поделиться