Jquery-背景图像随select中的数据属性而变化
Jquery - background-image change with data attributes from select
我必须更改什么才能使其工作?
当我尝试访问$(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") ) );
})
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")));
});
此处的示例
相关文章:
- 序列化数据属性中对象的最可靠方法
- jQuery最近父级的数据属性选择器
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 数据属性仅在切换设备模式下工作
- 函数jquery.html()不提供数据属性集值
- 在数据属性上进行下拉自动选择
- 检测数据的变化
- JavaScript-获取数据属性的值返回未定义的值
- 如何替换数据属性中的特定字符串单词
- 使用数据属性将HTML数据复制到另一个元素
- 带有CSS的数据属性就没那么有用了
- 查找所有TD标签并读取其数据属性
- 使用jQuery获取第N个元素的数据属性值
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 数据属性有没有更干净的方法
- 是否可以使用CSS分配数据属性
- 根据jquery数据属性值进行查询
- 使用jQuery在select选项上设置HTML数据属性
- 使用Javascript而不是html数据属性配置Parsley
- Jquery-背景图像随select中的数据属性而变化