javascript - 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 元素:

$('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