0

我写了一点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 = "";
    };
}

任何帮助都是王牌！

JS 小提琴

4

2 回答 2

2

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

如果我得到它，也许我会调整你的小提琴，但你可能已经自己用这些信息优化它。

于 2013-07-31T12:35:27.103 回答
0

您可以通过删除语句并将它们替换为对某种工厂类的调用来buttonOn稍微改进该功能。if例如：

function ArrowHandlerFactory(){    
    var self = this;

    self.Create = function(arrow) {        
        alert(arrow);
        if ( arrow == topArrow.mouseout ) {

            return new topArrowHandler();
        }
    }

    return {
        Create: self.Create
    }
}

var topArrowHandler = function(){
    var self = this;

    self.ArrowPressed = function() {
        newArrow = document.getElementById("topArrow");
    newArrow.setAttribute("src", topArrow.mouseover);
    menuText.setAttribute("src", topArrow.text);
    }    

    return {
        ArrowPressed: self.ArrowPressed
    }
}

var factory = new ArrowHandlerFactory();

//set buttonHover function
function buttonOn(){
    var handler = factory.Create(arrow);

    handler.arrowPressed();
}

以上不是完整的代码，但它为您提供了入门的基础知识。

我并不是说以上是最好的 JavaScript，但是使用工厂类，然后为每个箭头方向使用特定类的核心思想仍然是合理的。

于 2013-07-31T12:05:35.697 回答