javascript - 单击元素的 jQuery 多个背景

Question

我在让它工作时遇到了一些问题。我目前正在产品页面上从事电子商务元素。在此页面上，我有主产品图片和另外两行图片，用户可以从中选择，以便他能够查看具有不同背景的主图片。

它的工作方式是我需要获取#actual_image_url(这是我需要叠加的照片的实际大小)并使用多个背景添加它，或者使用 innerHTML 将它添加到主图像的 div 中。

基本上，到目前为止，我已经为该 DIV 上的点击事件添加了一个事件监听器，并且我一直在尝试将“data-target”属性推送到一个数组。我想如果我可以将实际的“数据目标”URL 存储在一个数组中并弹出最后两个，那应该可以做到。它没有，所以我正在寻求帮助:)

<div class="image_options">

<!-- first row of images -->
<a href="#"><img src="#small_image_url" id="option-value-47" data-target="#actual_image_url"></a>
<a href="#"><img src="#small_image_url" id="option-value-48" data-target="#actual_image_url"></a>

<!-- second row of images -->

<a href="#"><img src="#small_image_url" id="option-value-147" data-target="#actual_image_url"></a>
<a href="#"><img src="#small_image_url" id="option-value-148" data-target="#actual_image_url"></a>

</div>

到目前为止的 jQuery 代码:

var contentImageUrl = [];
$(selector).on("click", function(event) {       
            event.preventDefault();     
            contentImageUrl.push(event.srcElement.getAttribute('data-target'));

用户应该点击两个第二行图片中的任何一个，所以我需要它们的数据属性。在获取“data-target”URL 后，我还需要一种方法将这些作为背景添加到主图像。

请大家帮忙!

Answer 1

您正在寻找 JQuery.data():http://api.jquery.com/jquery.data/

此外，您可以使用 $(this) 来引用被点击的元素。

contentImageUrl.push($(this).data("target"));