javascript - 一种更简洁的方式来编写我当前的 javascript 代码？

Question

已关闭。这个问题是 off-topic 。目前不接受答案。

---

想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。

已关闭10 年前。

Improve this 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 ，...

它们是“少写多做”库，您可以通过它们减少代码行数。