Question

我有这段代码，当找到ID时会给图像提供URL值，因此单击时将转到指定的URL：

<script>
document.getElementById("ww-enTeam").addEventListener("click", myFunction);

    function myFunction() {
      window.location = "/site/contact/#workwithus";
    }
document.getElementById("ww-enTeam").addEventListener("click", myFunction);

</script>

这对于独特的图像效果很好。现在，我有3种使用3种不同语言的图像，因此单击时必须将window.location更改为其他URL。我找不到一个示例来说明当您拥有3个不同的ID时，它如何工作。

这是对Wordpress灯箱插件的调整，网站也使用了Polylang，因为我无法修改代码，因此必须以这种方式解决。

始终感谢帮助，谢谢！

Answer 1

您可以动态传递URL引用。

  document.getElementById("ww-enTeam").addEventListener("click", 
        myFunction('www.test.com/');

document.getElementById("anotherID").addEventListener("click", 
        myFunction('www.test2.com/');

        function myFunction(url) {
          window.location = url;
        }

Answer 2

您可以将id和url存储在一个对象中，其中id是图像元素的id，而url是它们各自的url。然后将函数编写为：

let obj = {
    id1:url1, 
    id2:url2, 
    id3:url3
} 
function myFunction(evt) {
    window.location = obj[evt.target.id];
}

Answer 3

总的来说，我提出以下建议：

window.addEventListener("load", function load(event) {

    let els = document.getElementsByClassName("image");

    for (i = 0; i < els.length; i++) {

        let id = els[i].id;
        let image = document.getElementById(id);

        image.addEventListener("click", function() {
            window.location = obj[id];
        });

    }

    let obj = {
        "id1": "http://myurl1.com", 
        "id2":"http://myurl2.com", 
        "id3":"http://myurl3.com"
    } 
});

将不同的URL分配给不同的ID

3 个答案: