Question

我正在编写一个网页应用/游戏，其中有大量可点击的.png图像，当您将鼠标悬停在它们上方时会发光，并在点击时立即进行更改。我目前的代码完全按照我的要求去做，但是我注意到有很多冗余出现并通过ID获取元素。我想知道是否有一个比我更精通javascript的人知道更好的方式来写这个。当然，在根文件夹中，每个“按钮”都有3个.png文件，每个文件代表不同状态的图片...（即inventorypic.png，inventorypicglow.png和inventorypicdown.png将是更改的图像文件进出DOM，取决于“inventorypic”元素的状态。）

function glowText(element) {
    var glowPicName = element.id +  "glow.png";
    element.src = glowPicName;
}
function normalText(element) {
    var normalPicName = element.id + ".png";
    element.src = normalPicName;
}
function downText(element) {
    var downPicName = element.id + "down.png";
    element.src = downPicName;
}
document.getElementById("inventorypic").addEventListener("mouseover", function(){glowText(this)}, false);
document.getElementById("inventorypic").addEventListener("mouseout", function(){normalText(this)}, false);
document.getElementById("inventorypic").addEventListener("mousedown", function(){downText(this)}, false);
document.getElementById("inventorypic").addEventListener("mouseup", function(){glowText(this)}, false);

document.getElementById("refinementpic").addEventListener("mouseover", function(){glowText(this)}, false);
document.getElementById("refinementpic").addEventListener("mouseout", function(){normalText(this)}, false);
document.getElementById("refinementpic").addEventListener("mousedown", function(){downText(this)}, false);
document.getElementById("refinementpic").addEventListener("mouseup", function(){glowText(this)}, false);

document.getElementById("propertiespic").addEventListener("mouseover", function(){glowText(this)}, false);
document.getElementById("propertiespic").addEventListener("mouseout", function(){normalText(this)}, false);
document.getElementById("propertiespic").addEventListener("mousedown", function(){downText(this)}, false);
document.getElementById("propertiespic").addEventListener("mouseup", function(){glowText(this)}, false);

document.getElementById("locationpic").addEventListener("mouseover", function(){glowText(this)}, false);
document.getElementById("locationpic").addEventListener("mouseout", function(){normalText(this)}, false);
document.getElementById("locationpic").addEventListener("mousedown", function(){downText(this)}, false);
document.getElementById("locationpic").addEventListener("mouseup", function(){glowText(this)}, false);

document.getElementById("descriptionpic").addEventListener("mouseover", function(){glowText(this)}, false);
document.getElementById("descriptionpic").addEventListener("mouseout", function(){normalText(this)}, false);
document.getElementById("descriptionpic").addEventListener("mousedown", function(){downText(this)}, false);
document.getElementById("descriptionpic").addEventListener("mouseup", function(){glowText(this)}, false);

这些4行块中有很多（我只是没有在这里复制它们）..每个按钮一个，它看起来有点荒谬。有更好的方法吗？

我还有另外一个小问题，我认为我已经知道了答案，但我只是想检查一下......你能用自定义形状制作元素，比如正方形或矩形以外的形状吗？我想不，但请告诉我，如果我错了。

Answer 1

按ID尝试获取对象一次，然后使用引用。

var inventorypic = document.getElementById("inventorypic");
addEvents(inventorypic);    

var refinementpic= document.getElementById("refinementpic");
addEvents(refinementpic); 

var propertiespic = document.getElementById("propertiespic");
addEvents(propertiespic );   

var descriptionpic= document.getElementById("descriptionpic");
addEvents(descriptionpic);    

fucntion addEvents(obj)
{
    obj.addEventListener("mouseover", function(){glowText(this)}, false);
    obj.addEventListener("mouseout", function(){normalText(this)}, false);
    obj.addEventListener("mousedown", function(){downText(this)}, false);
    obj.addEventListener("mouseup", function(){glowText(this)}, false);
}

在Javascript中寻找更高的效率

1 个答案: