jquery - 從選擇的數據屬性更改背景圖像

Question

我必須改變才能使其工作？

當我嘗試訪問$(this).data("image")時，它是undefined。

HTML

<div id="imagecontainer"></div> 
    <select class="image"> 
     <option data-image="url(http:www.test.de/images/test1.jpg)">Image1</option> 
     <option data-image="url(http:www.test.de/images/test2.jpg)">Image2</option> 
     <option data-image="url(http:www.test.de/images/test3.jpg)">Image3</option> 
     <option data-image="url(http:www.test.de/images/test4.jpg)">Image4</option> 
    </select> 
</div> 

的jQuery：

$('.image').on('change', function() { 
    $("#imagecontainer").css("background-image", ($(this).data("image"))); 
}) 

Answer 1

的select元素沒有一個data-image屬性。孩子們option元素呢，所以你就必須選擇所選擇的選項元素：

$('option:selected', this).data("image"); 

或..

$(this).find('option:selected').data("image"); 

$('.image').on('change', function() { 
    $("#imagecontainer").css("background-image", ($('option:selected', this).data("image"))); 
}); 

Example Here