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

zd287kbt 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(122)

我正在创建一个动态图像网格。我需要创建的功能，将允许用户点击一个图像，并为该图像将在页面上的其他地方的预览框中显示。除了这应该是一个简短的描述，这也是从点击的图像的属性抓取。
下面是一些静态代码，表示我已经拥有的内容：

<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');
});

目前，这段代码只是作为功能测试触发警报。我现在需要建立的是：
1.如何添加额外的信息到图像（S）.我可以只使用伪属性？
1.如何通过JQ/jQuery从链接中获取这些数据
一旦我得到了信息，我就知道如何将其插入到页面上其他地方的div中。

JavaScript

来源：https://stackoverflow.com/questions/26063010/add-value-to-dynamically-generated-image-then-display-on-click

2条答案

按热度按时间

xam8gpfp1#

除非我误解了这个问题，否则我会使用data--attributes将描述存储在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'));
});

赞(0）回复(0）举报 2023-03-21

j91ykkif2#

首先，因为你的网格是动态创建的，你应该使用.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的data方法来获取描述：

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

赞(0）回复(0）举报 2023-03-21

我来回答

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

2条答案

相关问题

热门标签

最新问答