Question

CSSNinja的Ryan Seddon（Twitter上的@ryanseddon和GitHub）写了一个很棒的仅限CSS的灯箱库，甚至允许带有文本框的图像（<span> s）并且不依赖于：目标选择器。它使用<ul>和：checked复选框选择器来修复：target selector-method调用的许多常见问题。

在将代码注入我的网站之前，我已经尝试实现他的代码并根据我的需要制作了沙盒版本。一切似乎都运行得很好，除非我点击第二个<li> /图像，而不是从代码部分中提取内容，它只是从第一个<li> /图像反刍信息。 / p>

我哪里错了？我希望将这些图像中的一些点击并转换成光箱图像+文本框，排列成网页上的典型图像库。奖励积分如果您可以帮助我这样做，以便点击文本框不会使灯箱消失，只点击外的任何地方文本框使它消失。

以下是我正在使用的JSfiddle代码：http://jsfiddle.net/Hideto/q7ghLvkd/

如何让它阅读所点击的确切<li> /图片中的信息，而不只是复制/显示第一个<li> /图片的信息？

Answer 1

哇，我不知道这种东西是可能的。真棒。

我只是调整你的小提琴，将第二个收音机的id更改为'bio2'，并附带标签以引用=“bio2” - 这似乎已经修复了它。

http://jsfiddle.net/q7ghLvkd/2/

        <label class="animated pulse1" for="bio2"><img src="http://www.cafenocturne.com/testpage/biogallery/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" title="Kieran" /></label>
        <input type="radio" id="bio2" name="Staff" />

所以问题是你有两个具有相同id的元素，并且通常在HTML中元素的id在整个页面中应该是唯一的。

我不知道您的奖励积分挑战 - 我仍在查看它以确定点击如何打开它！ - 但是如果你没有得到你想要的答案，你是否知道你可以提供赏金？即，你真的可以提供奖励积分！

<ul>列表仅显示第一个<li>的内容，忽略第二个</li> <li> </li> </ul>

1 个答案: