Question

我无法解决这个问题。我目前正在产品页面上开展电子商务项目。在这个页面上，我有主要产品图像和另外两行图像，用户可以从中选择这些图像，以便能够以不同的背景查看主图像。

这样做的方法是我需要获得#actual_image_url（这是我需要叠加的照片的实际大小），并使用多个背景添加它，或者使用innerHTML将其添加到主图像的div中。

基本上，到目前为止，我已经为该DIV上的click事件添加了一个事件监听器，并且我一直在尝试将'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'));

用户应该点击两个第二行图片中的任何一行，因此我需要两者的数据属性。在我获取“数据目标”网址后，我还需要一种方法将这些作为背景添加到主图像。

请帮帮我们！

Answer 1

您正在寻找JQuery.data（）：http://api.jquery.com/jquery.data/

此外，您可以使用$（this）来引用已单击的元素。

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

jQuery点击元素的多个背景

1 个答案: