jQuery点击元素的多个背景

时间:2014-02-03 13:43:31

标签: javascript jquery html css

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

这样做的方法是我需要获得#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'));

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

请帮帮我们!

1 个答案:

答案 0 :(得分:0)

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

此外,您可以使用$(this)来引用已单击的元素。

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