向javascript数组中的图像添加超链接

我在这方面找到了一些主题，但没有一个真正回答我的问题，因为它们以不同的方式实现了阵列

我有一个带有图像和两个按钮next和previous的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>

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

网络上有什么新内容

javascript也如下所示：

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

<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=新
数组（“obrazky/0.png”、“obrazky/1.png”、“obrazky/2.png”、“obrazky/3.png”）；
var imgElement=document.getElementById（“imgDemo”）；
var i=0；
var imgLen=img.长度；
函数nxt（）
{
如果（i0）
{
我--；
}
其他的
{
i=伊姆格伦-1；
}
imgElement.src=img[i]；
}

它是功能性的，可以切换图片，但当我想向阵列中添加类似的内容时：

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

---

var img=新数组（“）；

---

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

乍一看，我可能遗漏了其他内容，但看起来您不小心退出了字符串，并且没有完全包含锚定标记

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

var img=新数组（“）；

你有几个选择。您可以像这样使用单引号（并包括标记）

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

var img=新数组（“”）；

或者我认为您可以在这里使用反勾号（在~squiggly下）使用文字字符串

var img=新数组（``）；

创建一个包含图像和URL的对象

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

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

---

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

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>

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

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

ul#图像{
边际：0px；
填充：0px；
列表样式类型：无；
}
ul#图像李{
显示：无；
}
李：第一个孩子，
ul#images li.active{
显示：块；
}
imageContainer=document.getElementById（“图像”）；
document.getElementById（“btnOne”）.addEventListener（函数（事件）{
event.preventDefault（）；
//在这里施展魔法。
//我已经有一段时间没碰香草了，给我一分钟：d
//基本上你需要做的就是在节点间循环，
//如果存在下一个激活项，请查找激活项。激活项：
//将nextSibling.class='active'设置为活动状态，并将当前元素移除为活动状态
对于（var i=0；i

---

没有测试它，但这是你想做的事情，我想你是在混合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];

---

如果您需要更多帮助，请告诉我…

只需将每个图像对应的url添加到数组中，然后将单击事件添加到图像中。单击事件应将用户重定向到与单击图像对应的url

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

var img=新数组（“obrazky/0.png”、“obrazky/1.png”、“obrazky/2.png”、“obrazky/3.png”）；
//为URL添加此数组
var url=新数组（“example1.com”、“example2.com”、“example3.com”、“example4.com”）；
var imgElement=document.getElementById（“imgDemo”）；
var i=0；
var imgLen=img.长度；
函数nxt（）
{
如果（i0）
{
我--；
}
其他的
{
i=伊姆格伦-1；
}
imgElement.src=img[i]；
//添加要重定向的单击事件
document.getElementById（“imgDemo”）.addEventListener（“单击”，函数（）{
window.location.href=URL[i]；
});                   
}

var img=new Array Array（“）；

有许多语法错误

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