具有不同锚目标的图像答案

【问题标题】：Image with different anchor targets具有不同锚目标的图像
【发布时间】：2019-11-22 00:15:28
【问题描述】：

如何让“_self”目标根据所选的 url 进行更改？比如

网站1：_self 网站2：_空白

这可能吗？


<html>
   <head>
      <title>Advertise Spot #1</title>

   <script>
        var links = ["http://www.website1.com","http://www.website2.com"];
        var images = ["https://www.website1.com/Content/Banners/2019_8_21_11_41_193.png","https://www.website2.com/Content/Banners/2019_8_21_11_35_493.png"];
         var i = 0;
        var renew = setInterval(function(){
            if(links.length == i){
                i = 0;
            }
            else {
            document.getElementById("bannerImage").src = images[i]; 
            document.getElementById("bannerLink").href = links[i];
        i++;

        }
        },3000);
        </script>

<a id="bannerLink" href="http://www.website1.com" onclick="void window.open(this.href,"_self"); return false;">
<img id="bannerImage" src="https://www.website1.com/Content/Banners/2019_8_21_11_41_193.png" width="900" height="900" alt="Website Ads">
</a>

</html>

【问题讨论】：

标签： javascript html image target banner

【解决方案1】：

为什么不用锚的 href-attribute 改变“target”属性呢？

HTML：

<a id="bannerLink" href="http://www.website1.com">
  <img id="bannerImage" src="https://picsum.photos/50" >
</a>

Javascript：

var links = [{
 href: "https://www.website1.com",
 img: "https://picsum.photos/id/237/100/100",
 self: true
},{
 href: "https://www.website2.com",
 img: "https://picsum.photos/id/235/100/100",
 self: true
}];

var i = 0;
var renew = setInterval(function(){
  if (links.length === i) {
    i = 0;
  }  else {
    document.getElementById("bannerLink").href = links[i].href; 
    document.getElementById("bannerLink").target = (links[i].self) ? "_self" : "_blank";;
    document.getElementById("bannerImage").src = links[i].img; 
    i++;
  }
},3000);

小提琴：https://jsfiddle.net/jaonLcpw/

【讨论】：

非常感谢，这似乎解决了我遇到的主要问题。尽管我可能应该更好地解释的问题是，除了目标问题之外，我也无法弄清楚如何将其扩展到 3 个或 4 个或更多链接/网站和不同的目标。
只需将您的信息放入一个对象数组中，如jsfiddle.net/jaonLcpw所示