Question

我想用html5数据属性更改图像源。我已经尝试了很多方法，但到目前为止仍然无法解决，因为这里的示例是代码;

HTML标记：

<img src="http://placehold.it/300x250&text=Default%20Image" data-imgSmall="http://placehold.it/300x250&text=Small%20Image" data-imgMedium="http://placehold.it/300x250&text=Medium%20Image" data-imgLarge="http://placehold.it/300x250&text=Large%20Image" />

<button class="small">Small Image</button>
<button class="medium">Medium Image</button>
<button class="large">Large Image</button>

jQuery代码：

var ImgSmall = $('img').data('imgSmall'),
    ImgMedium = $('img').data('imgMedium'),
    ImgLarge = $('img').data('imgLarge'),
    img = $('img');

$('button').click(function () {
    if ($(this).hasClass("small")) {
        img.attr('src', ImgSmall);
        alert(ImgSmall);
    }
    if ($(this).hasClass("medium")) {
        img.attr('src', ImgMedium);
        alert(ImgMedium);
    }
    if ($(this).hasClass("large")) {
        img.attr('src', ImgLarge);
        alert(ImgLarge);
    }
});

但是这段代码仍然没有用，plz建议我错了，提前谢谢：）

Answer 1

来自the HTML5 spec：

获取HTML文档中HTML元素的所有属性名称 ASCII-lowercased自动

使用小写名称：

var ImgSmall = $('img').data('imgsmall'),
    ImgMedium = $('img').data('imgmedium'),
    ImgLarge = $('img').data('imglarge'),
    img = $('img');

jquery使用html5数据属性更改图像源

1 个答案: