jQuery來自單擊元素的多個背景

Question

我在使它工作時遇到了一些麻煩。 我目前正在產品頁面上從事電子商務項目。 在此頁面上，我有主產品圖像和另外兩行圖像，用戶可以從中選擇它們，以便他可以查看具有不同背景的主圖像。

起作用的方式是我需要獲取#actual_image_url（這是我需要覆蓋的照片的實際尺寸），並使用多個背景將其添加，或者使用innerHTML將其添加到主圖像的div中。

基本上，到目前為止，我已經為該DIV上的click事件添加了一個事件偵聽器，並且我一直在嘗試將“數據目標”屬性推送到數組中。 我想出是否可以將實際的“數據目標” URLS存儲在數組中並彈出最后兩個，這應該可以做到。 沒有，所以我要尋求幫助:)

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

用戶應單擊第二兩行圖片中的任一行，因此我需要它們的數據屬性。 在獲取“數據目標” URL之后，我還需要一種將這些背景作為背景添加到主圖像的方法。

請幫助大家！

Answer 1

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

另外，您可以使用$（this）引用被單擊的元素。

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