访问 JS 幻灯片中的图像链接答案

【问题标题】：Accessing image link in JS slideshow访问 JS 幻灯片中的图像链接
【发布时间】：2015-05-05 07:31:14
【问题描述】：

初学者学习Javascript所以请耐心等待。仅限 Javascript。没有 JQuery。

我创建了一个 Javascript 幻灯片，它通过更改 img 标签的类（不透明度值）来淡入淡出（通过 JS 脚本中的 for 循环而不是 html 单独添加）。

我似乎无法获取当前图片的链接以打开仅包含该图片的新页面。我尝试使用 href 链接在每个图像周围添加标签。这在调试器 --> 元素中看起来不错，但是当我将鼠标悬停在图像上时，幻灯片会停止（按要求），但它始终链接到最后一个图像链接，而不是当前链接。

我首先尝试使用 getAttribute ("href")，然后使用 img 标签的 parentNode 属性。两者都不起作用（只返回最后一张图片的href？？！！）。我想知道如何访问它并确保除了当前图像周围的标签之外的所有标签都被隐藏或不活动？我尝试过的另一个选项是为图像（和元素）创建新的 Div 元素，但这也不起作用。

JS Fiddlehttps://jsfiddle.net/f5yt7rna/

【问题讨论】：

请将代码添加到您的问题中

标签： javascript image href

【解决方案1】：

z-index 属性指定元素的堆栈顺序。堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。

来源：http://www.w3schools.com/cssref/pr_pos_z-index.asp

现在 make 使当前元素在堆栈顶部。使用下面的脚本

#container img.show, a.show {
opacity:1;
z-index:1000
}

【讨论】：

谢谢。我错过了明显的。该链接在那里，但在堆栈中的最后一个链接下方。感谢您的帮助。

【解决方案2】：

将z-index:100 添加到#container img.show, a.show 规则中，以使可见项目位于另一个项目的顶部，并且其链接将获得点击。

【讨论】：