将超链接添加到javascript数组中的图像答案

【问题标题】：Adding hyperlink to image in javascript array将超链接添加到javascript数组中的图像
【发布时间】：2017-09-03 00:29:13
【问题描述】：

我找到了一些关于此的主题，但没有一个真正回答我的问题，因为他们对数组的实现方式不同。

我有这个 javascript 数组，其中包含图像和下一个和上一个按钮。我想为数组中的图片添加超链接，这样当我通过按钮循环浏览它们时，我可以单击它们并输入提到的站点。

HTML如下：

<div id="leftbox">
<p id="leftpopis"> Whats new on the web? </p>
<img src="obrazky/0.png" id="imgDemo" > 
<button onclick="prvs()" id="btnTwo"> <img src="obrazky/left.png"/> 
</button> 
<button onclick="nxt()" id="btnOne"> <img src="obrazky/right.png"/> 
</button>

而javascript也如下：

<script>
var img = new 
Array("obrazky/0.png","obrazky/1.png","obrazky/2.png","obrazky/3.png");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

    function nxt()
    {
        if(i < imgLen-1)
            {
                i++;
            }
        else{
                i=0;                
            }

            imgElement.src = img[i];                    
    }

    function prvs()
    {
        if(i > 0)
            {
                i--;
            }
        else
        {
            i = imgLen-1;
        }
            imgElement.src = img[i];                    
    }

它是功能性的，它可以切换图片但是当我想在数组中添加这样的东西时：

var img = new Array Array("<a href="comments.html"> obrazky/0.png"</a>);

它不起作用。有人知道如何更新数组以使其按预期工作吗？

【问题讨论】：

var img = new Array Array("<a href="comments.html"> obrazky/0.png"</a>); 有许多语法错误才能正常工作。
首先，用标签关闭你的脚本。其次，粘贴代码时，尽量不要出现明显的语法错误（例如代码中的数组赋值）。第三，如果你想让这些图片作为链接工作，那么你需要将放在标记中。

标签： javascript html arrays image

【解决方案1】：

只需将每张图片对应的url添加到数组中，并为图片添加点击事件即可。点击事件应该将用户重定向到点击图片对应的url。

<script>
var img = new Array("obrazky/0.png", "obrazky/1.png", "obrazky/2.png", "obrazky/3.png");
//add this array for urls
var urls = new Array("example1.com", "example2.com", "example3.com", "example4.com");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

function nxt()
{
    if(i < imgLen-1)
        {
            i++;
        }
    else{
            i=0;                
        }

        imgElement.src = img[i];
        //add click event to redirect 
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });                      
}

function prvs()
{
    if(i > 0)
        {
            i--;
        }
    else
    {
        i = imgLen-1;
    }
        imgElement.src = img[i];
     //add click event to redirect 
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });                   
}
</script>

【讨论】：

【解决方案2】：

我明白你在做什么。我建议事先加载您的内容，但在本例中，我建议您使用与数组相对的对象。甚至是一组对象。所以：

var img = [
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    },
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    }
];

您可以访问img[i].img 和img[i].href 等属性。

因此，在您当前的设置中，您想要执行以下操作：

<a href="" id="imageAnchor"><img id="imgDemo" src=""></a>

并使用

设置您的数据

document.getElementById("imageAnchor").href = img[i].href;
document.getElementById("imgDemo").src = img[i].img;

但正如我之前所说，更好的方法是预先加载图像并循环浏览它们。

<ul id="images">
    <li class='active'><a href="comments.html"><img src="obrazky/2.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/1.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/0.png"></a></li>
</ul>

<style>
    ul#images {
        margin:0px;
        padding:0px;
        list-style-type:none;
    }
    ul#images li {
        display:none;
    }
    ul#images li:first-child,
    ul#images li.active {
        display:block;
    }
</style>

<script>
     imageContainer = document.getElementById("images");

     document.getElementById("btnOne").addEventListener(function(event) {
         event.preventDefault();
         //do magic here.
         //been a while since I've touched vanilla so give me a minute :d
         //basically what you need to do here is cycle through the nodes, 
         //find the active one, if there is a nextSibling of .active:
         // set nextSibling.class ='active' and the current element remove active
         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].nextSibling !== 'undefined') {
                      imageContainer.childNodes[i].nextSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }
     };

     //Notice this function is similar and I've replaced nextSibling with Previous for the opposite direction 

     document.getElementById("btnTwo").addEventListener(function(event) {
         event.preventDefault();

         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].previousSibling !== 'undefined') {
                      imageContainer.childNodes[i].previousSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }

</script>

没有测试过，但这是你想做的事情

【讨论】：

【解决方案3】：

我认为您将 src 和链接本身混合在一起。

如果您想在客户端创建所有内容，您可以保留一个数组，其中包含每个图像的两个字段的信息：

var img = [ {link='xxx', src="obrazky/0.png"}, {link='yyy' src="obrazky/1.png"},... ]

然后在您的模板中，您必须使用链接包装图像：

<a id='imgDemoLink'> <img id='imgDemo'></a>

然后在你的脚本中你应该更新两个 DOM 元素：

imgElement.src = img[i.src];

然后获取DOM相关链接：

var aElement = document.getElementById("imgDemoLink");
aElement.href = img[i.link]

如果您需要任何额外的帮助，请告诉我...

【讨论】：

【解决方案4】：

用图片和网址创建一个对象？

[{img: "obrazky/0.png", url: "comments.html"}, {...}, {...}]

imgElement.src   = img[i.img];
linkElement.href = img[i.url];

【讨论】：

【解决方案5】：

乍一看，我可能遗漏了其他东西，但看起来你不小心退出了你的字符串，也没有完全包含锚标记。

var img = new Array("<a href="comments.html"> obrazky/0.png"</a>);

这里有几个选项。您可以像这样使用单引号（并包括您的 a 标签）

var img = new Array("<a href='comments.html'> obrazky/0.png</a>");

或者我认为您可以在此处使用反引号（在 ~squiggly 下）使用文字字符串

var img = new Array(`<a href="comments.html"> obrazky/0.png</a>`);

【讨论】：