帶數據屬性的圖像切換器

$(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" />

來源

2016-11-10 niksos

因爲在圖像中沒有data-src。 –

您應該添加data-src的屬性，您嘗試訪問。

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

來源

2016-11-10 20:39:55

當你做.data("src")的JavaScript正在搜索的圖像元素data-src屬性，但你的形象元素只有src。

不要使用.data，更好地利用.attr("data-hover")和.attr("src")

來源

2016-11-10 20:39:32 Starwave

這將不起作用，因爲它已被前面的操作覆蓋。 –

啊，你說的對，但是仍然使用'.attr'好於'.data'在我看來 – Starwave

是的，在這種情況下'.data（'src'）'是錯誤的，因爲沒有指定這樣的屬性。 –

帶數據屬性的圖像切換器

回答

相關問題