Question

我正在创建一个动态图像网格。我需要创建允许用户单击图像的功能，并且该图像将显示在页面上其他位置的预览框中。除此之外，还应该是一个简短的描述，也可以从点击图像的属性中获取。

这是一些代表我已有的静态代码：

<div class="indent-left-10 sliderBlock">
    <div class="image-feed-slider">
        <img src='youtube-300x124.jpg' alt='Creating a YouTube presence' class='clickable'>
        <img src='youtube-300x1240.jpg' alt='Creating a plastic presence' class='clickable'>
        <img src='youtube-300x1247.jpg' alt='Creating a wrapping presence' class='clickable'>

我的JQuery：

$('.clickable').click(function() {
    alert('TEST ALERT');
});

目前，此代码只是将警报作为测试功能触发。我现在需要建立的是：

如何将额外信息添加到图像中。我可以使用伪属性吗？
如何从链接

一旦我获得了信息，我知道如何将其插入到页面上其他位置的div中。所以对上述两点的任何帮助都会非常感激。

Answer 1

除非我误解了这个问题，否则我会使用data - 属性将描述存储在img - 元素中。然后用jQuery读取这些属性就是一件简单的事情。像这样：

1）HMTL

<img src='youtube-300x124.jpg' alt='Creating a YouTube presence' data-desc='A description about creating a YouTube presence' class='clickable'>
<img src='youtube-300x1240.jpg' alt='Creating a plastic presence' data-desc='A description about creating a plastic presence' class='clickable'>
<img src='youtube-300x1247.jpg' alt='Creating a wrapping presence' data-desc='A description about creating a wrapping presence' class='clickable'>

2）jQuery

$('.clickable').click(function() {
    alert($(this).data('desc'));
});

Answer 2

首先，由于您的网格是动态创建的，因此您应该使用.on（）而不是.click（）。

$('.image-feed-slider').on("click", ".clickable", function() {
     // display image
});

您可以使用数据为属性添加前缀：

<img data-description="image description" src='youtube-300x124.jpg' alt='Creating a YouTube presence' class='clickable' >

然后您可以使用jquery的数据方法来获取描述：

$('.image-feed-slider').on("click", ".clickable", function() {
     var description = $(this).data("description");
     // display image
});

为动态生成的图像添加值，然后单击显示

2 个答案: