通过javascript浏览到HTML中的不同页面

Question

我有一些代码可以改变一个mainImage，以反映我点击其中一个页面时其他三个图像中的一个。我试图做到这一点，当用户点击mainImage时，它会将它带到与单击时显示在mainImage上的图像相关联的页面。虽然我怀疑它们写得很好，但图像更改功能正在运行。我会将它们包括在内以防万一它可能会影响别的东西。

window.onload = init; 
 

 
function init() { 
 
    var featureOne = document.getElementById("featureOne"); 
 
    featureOne.addEventListener("click", mainToOne, false); 
 
    var featureTwo = document.getElementById("featureTwo"); 
 
    featureTwo.addEventListener("click", mainToTwo, false); 
 
    var featureThree = document.getElementById("featureThree"); 
 
    featureThree.addEventListener("click", mainToThree, false); 
 
    var mainClick = document.getElementById("mainFeature"); 
 
    mainClick.addEventListener("click", mainClick, false); 
 
}; 
 

 
function mainClick() { 
 
    var image = document.getElementById("mainFeature"); 
 
    var imgSource = image.src; 
 
    if(imgSource === "feature1.jpg") { 
 
    window.location.href = "http://www.google.com"; 
 
    } 
 
    else if(imgSource === "feature2.jpg") { 
 
    window.location.href = "http://www.facebook.com"; 
 
    } 
 
    else if(imgSource === "feature3.jpg") { 
 
    window.location.href = "http://www.bing.com"; 
 
    } 
 
} 
 

 
function mainToOne() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature1.jpg"; 
 
} 
 

 
function mainToTwo() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature2.jpg"; 
 
} 
 

 
function mainToThree() { 
 
    var mainImage = document.getElementById("mainFeature"); 
 
    mainImage.src = "feature3.jpg"; 
 
}

<img id="mainFeature" src="feature1.jpg"><br> 
 
<img id="featureOne" src="feature1.jpg"> 
 
<img id="featureTwo" src="feature2.jpg"> 
 
<img id="featureThree" src="feature3.jpg">

我也尝试把图像内具有的javascript在href属性返回一个字符串的地址。

<a href = "javascript:function();"><img></a>

当时这更有望一个可行的解决办法？

Answer 1

有两个问题与代码：

• 您正在使用的init函数变量mainClick，这样就遮蔽功能mainClick您试图绑定到该事件。
• 当您得到图像的来源时，您将获得图像的完整URL，而不仅仅是您分配给源的图像名称，因此比较将失败。

如果您提前计划一下，则不需要获取图像源。您想要的信息在早期阶段已经可用。您可以将图像的索引存储在变量中，而不仅仅是设置图像源。这样，您不必将图像名称与一串字符串进行比较，以尝试确定哪个图像被点击。

代码可以被重构为不太重复。您可以使用数组作为图像名称和链接。

window.onload = init; 

function listen(id, ev, handler) { 
    document.getElementById(id).addEventListener(ev, handler, false); 
} 

function init() { 
    listen("featureOne", "click", mainToOne); 
    listen("featureTwo", "click", mainToTwo); 
    listen("featureThree", "click", mainToThree); 
    listen("mainFeature", "click", mainClick); 
}; 

var currentMain = 0; 
var images = [ 
    "feature1.jpg", 
    "feature2.jpg", 
    "feature3.jpg" 
]; 
var links = [ 
    "http://www.google.com", 
    "http://www.facebook.com", 
    "http://www.bing.com" 
]; 

function mainClick() { 
    window.location.href = links[currentMain]; 
} 

function setMain(index) { 
    currentMain = index; 
    document.getElementById("mainFeature").src = images[index]; 
} 

function mainToOne() { 
    setMain(0); 
} 

function mainToTwo() { 
    setMain(1); 
} 

function mainToThree() { 
    setMain(2); 
}