javascript - 简化为面向对象的 JavaScript

Question

我写了一些JavaScript。这是我的第一次，我仍在学习。我想减少行数并提高效率。我相信面向对象编程将是我最好的选择。

该脚本将一个类分配给悬停时的按钮。获取该类的元素并执行各种 if 函数以确定是否应更改图像按钮的 src 属性。该脚本还同时更改另一个图像 src 属性。

我想知道是否可以以某种方式将 if 语句的逻辑压缩为一两个，然后使用变量执行 src 属性更改。但我不知道该怎么办...？

    //assign navButtons to var buttons (creates array)
var buttons = document.getElementsByClassName("navButton");

//set buttonHover function
function buttonOn(){
    if ( arrow == topArrow.mouseout ) {
        newArrow = document.getElementById("topArrow");
        newArrow.setAttribute("src", topArrow.mouseover);
        menuText.setAttribute("src", topArrow.text);
    }
    if ( arrow == rightArrow.mouseout ) {
        newArrow = document.getElementById("rightArrow");
        newArrow.setAttribute("src", rightArrow.mouseover);
        menuText.setAttribute("src", rightArrow.text);
    }
    if ( arrow == bottomArrow.mouseout ) {
        newArrow = document.getElementById("bottomArrow");
        newArrow.setAttribute("src", bottomArrow.mouseover);
        menuText.setAttribute("src", bottomArrow.text);
    }
    if ( arrow == leftArrow.mouseout ) {
        newArrow = document.getElementById("leftArrow");
        newArrow.setAttribute("src", leftArrow.mouseover);
        menuText.setAttribute("src", leftArrow.text);
    } 
}

//set buttonHover function
function buttonOff(){
    if ( arrow != topArrow.mouseout ) {
        resetArrow = document.getElementById("topArrow");
        resetArrow.setAttribute("src", topArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != rightArrow.mouseout ) {
        resetArrow = document.getElementById("rightArrow");
        resetArrow.setAttribute("src", rightArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != bottomArrow.mouseout ) {
        resetArrow = document.getElementById("bottomArrow");
        resetArrow.setAttribute("src", bottomArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
    if ( arrow != leftArrow.mouseout ) {
        resetArrow = document.getElementById("leftArrow");
        resetArrow.setAttribute("src", leftArrow.mouseout);
        menuText.setAttribute("src", start.text);
    }
}

//for each instance of buttons, assign class "active" onmouseover
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.className = "active";
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        console.log(arrow);
        buttonOn();
    };
}

//for each instance of buttons, remove class "active" onmouseout
for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseout = function () {
        arrow = document.getElementsByClassName("active");
        //get attribute
        arrow = arrow[0].getAttribute("src");
        buttonOff();
        this.className = "";
    };
}

任何帮助都是王牌!

The JS Fiddle

Answer 1

不要在 JS 中处理所有内容，您可以简单地在可用的 anchor 标记上设置背景图像，而不使用 img 标记，然后更改 :hover 上的背景图像(最好是使用 Sprite )。 JS 唯一应该起作用的部分是更改文本图像，但也不能通过更改 img 标签 src 属性来更改。您应该将所有文本图像预加载为内容(带有合理的替代文本)，将它们相互重叠，然后根据悬停的按钮显示/隐藏它们。

也许我会调整你的 fiddle ，但你可能已经用这些信息自己优化它了。