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

Jquery - 使用select中的数据属性更改背景图像

1 个答案: