Question

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
        $("header").addClass("sticky");
        $('header .logo a img').attr('src', $('header .logo a img').data("hover"));
    } else {
        $("header").removeClass("sticky");
        $("header").addClass("");
        $('header .logo a img').attr('src', $('header .logo a img').data("src"));
    }
});

第一个有效，但src不再回来了。该怎么做？

<img src="img/logo2.png" data-hover="img/logo.png" alt="" class="img-responsive" />

Answer 1

您应该添加您尝试访问的data-src属性。

<img src="img/logo2.png" data-src="img/logo2.png" data-hover="img/logo.png" alt="" class="img-responsive" />

Answer 2

当您执行.data("src")时，javascript正在搜索图片元素上的data-src属性，但您的图片元素只有src。

请勿使用.data，最好使用.attr("data-hover")和.attr("src")

具有数据属性的图像切换

2 个答案: