我如何 window.open 不同的 href 与不同的图像

Question

我在程序中有一些限制，如果

解决方案不需要 JQuery，正如我上面提到的，它确实有一些

限制。

我想要实现的是。

动态更改 JavaScript 图像。（完成）
当用户点击每张图片时，会导致不同的 link。（需要帮助！）

下面是我当前的代码。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var image1=new Image()
image1.src="image_1.jpg" 

var image2=new Image()
image2.src="image_2.jpg"

var image3=new Image()
image3.src="image_3.jpg"

var step = 1 

function slideit(){

document.images.slide.src=eval("image"+step+".src")

if(step<3) step++

else step=1

setTimeout("slideit()",2500)

}

slideit()

function inputhref() {

var href = 'https://www.google.ca/';

window.open(href)

}
</script>
</head>
<body>
<img src="image_1.jpg" name="slide" width="400" height="400" 
 onclick="inputhref()">

Answer 1

我解决了一些错误，现在可以了！

window.location.href 用于在同一个 window.
document.querySelector() 用于选择元素。
用函数名调用setTimeout()而不使用''。

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <img src="image_1.jpg" id="slide" width="100" height="100" 
     onclick="inputhref()">
     
     
    <script type="text/javascript">

    var image1=new Image()
    image1.src="https://image_1.jpg" 

    var image2=new Image()
    image2.src="https://image_2.jpg"

    var image3=new Image()
    image3.src="https://image_3.jpg"
    
    var step = 1 
    var slide = document.querySelector('#slide');
    var timer
 
 function slideit(){
 
 slide.src="https://image_"+step+".jpg"
 
 if(step<3) step++
 
 else step=1
  console.log('Image changed to ' + slide.src);
 timer = setTimeout(slideit,2500)

 }

slideit();

    function inputhref() {

 window.location.href = slide.src;
  clearInterval(timer);
 
 }
    </script>
</body>
</html>

Answer 2

您可以创建一个对象来存储图像源和关联的 link。此外，除了设置和检索源 URL 之外，您是否对这些 Image() 类进行了任何操作？因为您也可以将它们作为简单的字符串存储在对象中。我还建议将步骤存储为属性，并将所有步骤保存在一个数组中，以便更容易找到正确的步骤。

类似于：

var images = [
    {
        step: 1,
        src: "image_1.jpg",
        link: "http://example.com/image1-link",
    },
    {
        step: 2,
        src: "image_2.jpg",
        link: "http://example.com/image2-link",
    },
    // Repeat as necessary
]

然后您可以相应地更改函数：

function slideit() {
    var correctImage = images.find(image => image.step == step);
    document.images.slide.src = correctImage.src;
    // rest is unchanged
}

function inputhref(step) {
    var correctImage = images.find(image => image.step == step);
    window.open(correctImage.link);
}

我如何 window.open 不同的 href 与不同的图像

How can i window.open different href with different images

javascript

window.open