有一点我不明白的是关于获取 html 元素的属性，我有一个小元素要自己开发，我必须获取 img 源元素，到目前为止还可以，但是每当我想用 data-tablet 或data-mobil 或 data-web 在宽屏上我的 img 源没有变化。我的错误是什么？
我想做什么？
我有三个数据属性 data-mobil 为 <480px data-mobil 为 <768px 和 data-web 为 >=768px 他们属性将适用
编辑:根据实际分辨率
编辑2:我检查srcset但这不是我谈论的事情..我的问题是改变图像src我的意思是在桌面上和移动或平板电脑上将是不同的图像
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>最佳答案
你的if条件错误
条件应该是这样的
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");
关于javascript - 根据情况改变img来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42085209/