根據條件採用img源碼

有些東西我不明白是關於獲取html元素的屬性我有一個小項目來發展自己，我必須獲得img源元素它是okey到目前爲止，但只要我想要在寬屏幕上使用data-tablet或data-mobil或data-web來更改img源碼我的img源碼不是正文。我的錯誤是什麼？根據條件採用img源碼

我想要做什麼？我有<480pxdata-mobil爲>=768px 3個數據 - 屬性data-mobil爲<768px和data-web他們屬性將被應用

編輯：根據實際分辨率

編輯2：我檢查srcset但是這是沒有的事，我說話about..my問題是chancing圖片src我的意思是在dekstop和手機或平板電腦將是不同的圖像

please click to see my project on codepen

$(function(){ 
 
    
 
    $(".box img").each(function(){ 
 
    var getWeb = $(this).parents(".box").find("img").attr("data-web"); 
 
    var getTablet = $(this).parents(".box").find("img").attr("data-tablet"); 
 
    var getMobil = $(this).parents(".box").find("img").attr("data-mobil"); 
 

 
    if ($(window).width() < 768) { 
 
     $(this).attr("data-src",getTablet); 
 
    }else if ($(window).width() < 480){ 
 
    $(this).attr("data-src",getMobil); 
 
    }else if ($(window).width() > 480){ 
 
     $(this).attr("data-src",getTablet); 
 
    }else if($(window).width() > 768) 
 
    { 
 
    $(this).attr("data-src",getWeb); 
 
    } 
 
    }); 
 
})

.box{ 
 
    margin:10px; 
 
    float:left; 
 
} 
 
.box img{ 
 
    width:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
    <div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/18/21/34/cyprus-1990939_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2017/01/31/09/30/raspberry-2023404_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    
 
    <div class="box"> 
 
    <img data-src="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-web="https://cdn.pixabay.com/photo/2017/01/20/15/06/orange-1995056_960_720.jpg" data-tablet="https://cdn.pixabay.com/photo/2014/06/29/12/46/apple-379373_960_720.jpg" data-mobil="https://cdn.pixabay.com/photo/2016/02/21/00/29/fruit-1213041_960_720.jpg" class="lazyload" /> 
 
    </div> 
 
    
 
    
 
</body> 
 
</html>

來源

2017-02-07 ani_css

您試圖以最複雜的方式實現某些目標。由於您在問題中添加了css標籤，因此您可以輕鬆使用媒體查詢以達到您的目的。 – Khaleel

但圖像將動態顯示，我不會使用同一張圖片 –

您介意srset屬性嗎？ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img –

你如果條件是錯誤的

條件應該像

if ($(window).width() > 768) { 
    $(this).attr('src', getWeb); 
} else if ($(window).width() < 768 && $(window).width() > 480) { 
    $(this).attr('src', getTablet); 
} else if ($(window).width() < 480) { 
    $(this).attr('src', getMobil); 
}

編輯

而不是寫這麼長的get函數，你可以寫

var getWeb = $(this).attr("data-web"); 
var getTablet = $(this).attr("data-tablet"); 
var getMobil = $(this).attr("data-mobil");

來源

2017-02-07 08:46:56 Kenny

是的，但我想不僅我的條件也許我的get功能也是錯誤的（我試圖學習jquery） –

謝謝我也有其他問題，如果你合適.each是正確的？還是我必須用另一種方式？ –

只要你使用jquery，.each最好在DOM元素上循環。根據我的知識，你如何使用每一個，都是正確的方法。沒有問題 – Kenny

根據條件採用img源碼

回答

相關問題