Question

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

＆＃13;

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";
}

＆＃13;

<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">

＆＃13;

我还尝试将图像放在里面，让javascript返回一个字符串，其地址在href属性中。

＆＃13;

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

＆＃13;

这是否有可能找到可行的答案？

Answer 1

代码存在两个问题：

您正在mainClick函数中使用变量init，因此会影响您尝试绑定到事件的函数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);
}

通过javascript导航到HTML中的其他页面

1 个答案: