Question

我是一个初学者，并且已经整合了一些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)';
}

感谢您的帮助和建议。

Answer 1

我建议您使用工具和Javascript库，例如jQuery，MooTools，Dojo，...

他们“少写更多”库，你可以通过它们减少代码行。

Answer 2

转到http://microjs.com/，然后为您要执行的操作选择合适的工具

Answer 3

Javascript中更安全的风格是在函数参数parantheis之后立即开始括号（参考Douglas Crockfords会话）。这对所有街区来说都是一个很好的做法。如果块在return语句之后没有立即启动，则返回语句肯定会中断。它将返回undefined。
可以使用CSS
可以使用javascript对事件进行批量更改。
事件挂钩可以使用javascript完成，而不是将它们放在html中。
像jQuery这样的库会使脚本看起来整洁。

Answer 4

使用jQuery或其他类似的Javascript库。不要直接使用DOM树。您最终可能会遇到不是跨浏览器的代码。学习这样的图书馆需要一些额外的学习，但它非常值得。
使用CSS类，除非必须（在这种情况下 - 您不必），否则不要操作样式属性。而不是更改元素样式，更改其类。尽可能多地保留CSS-es。

Answer 5

我认为，这里的第一步是重用你的代码：你需要一个翻转函数和一个rollout函数，并且每个元素都要自我识别自己的函数。

其次，您可能希望统一（并使语义）文本标签和无线电输入之间的关系。

所以......我们最终得到的结果是：

<label onMouseOut="jakryout(this)" onMouseOver="jakryover(this)"><input type="radio" name="fb1" />Button1</label>
<label onMouseOut="jakryout(this)" onMouseOver="jakryover(this)"><input type="radio" name="fb2" />Button2</label>
<label onMouseOut="jakryout(this)" onMouseOver="jakryover(this)"><input type="radio" name="fb3" />Button3</label>

和

function jakryover (element){
    element.style.color = "#f00";
    element.firstChild.checked = true;
}

function jakryout (element){
    element.style.color = "#00f";
    element.firstChild.checked = false;
}

你可以做的更多，使这更简单，但这将是一个良好的开端。

修改

这是抽象的CSS方法：

function jakryover (element){
    element.classList.add("overclass");
    element.firstChild.checked = true;
}
function jakryout (element){
    element.classList.remove("overclass");
    element.firstChild.checked = false;
}

Answer 6

我没有在浏览器中尝试过，但是你可以通过使用父作为输入参数并使用它中的cild元素来使鼠标事件更加通用。

我建议您使用类似jQuery的东西，让您的编码javascript更轻松。要使用框架，您可以尝试http://jsfiddle.net/让您入门......

function mouseEvent(container) 
{ 
container[0].checked = ! container[0].checked; 
    if (links.checked == true)
    {
        container[2].style.color = 'black'; 
    } 
    else
    {
        container[2].style.color = 'rgb(153,153,153)';
    }
}


<div id="aaa" onMouseOut="mouseEvent(this)" onMouseOver="mouseEvent(this)">         
    <input type="radio" name="fb" /><br />
    <span class="sl" id="fb_link">Button1</span>
</div>

编写我当前的javascript代码更简洁的方法？

6 个答案: