Question

我正在使用data属性来传递带链接的数据，但是经常发生这种声明变得多余，例如我有一个图像数组，我迭代并在屏幕上显示。它们中的每一个都有一个图像ID和一组作为链接呈现的选项。我现在在每个链接中传递image_id在数据属性中。但是必须有一种方法只能声明一次image_id，然后在点击与图像相关联的链接时收集这些数据。

    for($i = 0; $i <= ($image_array_length - 1); $i++){ ?>

<img src="somesrc" />

<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 1</a>
<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 2</a>
<a href="#" data-image_id="<?php echo $image['image_id']; ?>">Image option 3</a>

<?php }?>

因此，我不希望为每个链接声明图像ID，而是希望得到类似的内容：

    for($i = 0; $i <= ($image_array_length - 1); $i++){ ?>

<img src="somesrc" id="data-placeholder" data-image_id="<?php echo $image['image_id']; ?>" />

<a href="#" class="js-selector">Image option 1</a>
<a href="#" class="js-selector">Image option 2</a>
<a href="#" class="js-selector">Image option 3</a>

<?php }?>

但我遇到的问题是有几个图像，每个图像在img元素上都有相同的id，这意味着我无法识别特定的image_id。所以在javascript：

$(".js-selector").click(function(){
    var image_id = $("#placeholder").data("image_id");
    some statements...
});

如果我想在第二个HTML示例中声明image_id，javascript应该如何知道要收集哪个image_id？

声明和收集数据的最佳方式

0 个答案: