我的网页上有 img 元素，当我调整窗口大小时，它有 data-mobil 和 data-tablet 属性我的图像 src正在尝试使用 data-mobil 或 data-table 但如果我的图像没有任何属性 data-mobil 或 data-table 然后在响应时我的 img 没有出现在响应中如何做到这一点。
function makeResize(){
var imageSrc = $(".myDiv img");
if($(window).width() <=768 && $(window).width()>480){
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('tablet'));
});
}else if($(window).width() <=480 ) {
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('mobil'));
});
}else{
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('src'));
});
}
}
$(document).ready(function(){
$(window).resize(function(){
makeResize();
});
makeResize();
});.myDiv{width:900px}
.myDiv img{ display:block;margin:20px;width:100%;}<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="myDiv">
<img src="http://www.slidesjs.com/img/example-slide-350-2.jpg" data-tablet="http://www.w3schools.com/w3css/img_mountains_wide.jpg" data-mobil="http://wowslider.com/sliders/demo-23/data1/images/landscape1344620.jpg">
<img src="http://www.w3schools.com/w3css/img_fjords_wide.jpg" data-tablet="http://semtasoft.com/wp-content/gallery/semtasoft/Slide-img-4.jpg" data-mobil="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://hdimagesnew.com/wp-content/uploads/2015/11/New-Wallpapers-HD.jpg" data-mobil="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://csgowallpapers.com/assets/images/original/mossawi_697490225546_20161227125412_701766109559.png" data-tablet="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://csgowallpapers.com/assets/images/original/mossawi_521575293969_20170108191041_920035389717.png">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>最佳答案
只需检查相应的data-*属性的值是否为undefined，然后相应地hide/show并改变src 属性。show 上的
这是您更新后的代码段。
function makeResize() {
var imageSrc = $(".myDiv img");
if ($(window).width() <= 768 && $(window).width() > 480) {
$(imageSrc).each(function(key, value) {
if ($(value).data('tablet') == undefined)
$(value).hide();
else {
$(value).attr('src', $(value).data('tablet'));
$(value).show();
}
});
} else if ($(window).width() <= 480) {
$(imageSrc).each(function(key, value) {
if ($(value).data('mobil') == undefined) {
$(value).hide();
} else {
$(value).attr('src', $(value).data('mobil'));
$(value).show();
}
});
} else {
$(imageSrc).each(function(key, value) {
$(value).attr('src', $(value).data('src'));
});
}
}
$(document).ready(function() {
$(window).resize(function() {
makeResize();
});
makeResize();
});.myDiv {
width: 900px
}
.myDiv img {
display: block;
margin: 20px;
width: 100%;
}<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="myDiv">
<img src="http://www.slidesjs.com/img/example-slide-350-2.jpg" data-tablet="http://www.w3schools.com/w3css/img_mountains_wide.jpg" data-mobil="http://wowslider.com/sliders/demo-23/data1/images/landscape1344620.jpg">
<img src="http://www.w3schools.com/w3css/img_fjords_wide.jpg" data-tablet="http://semtasoft.com/wp-content/gallery/semtasoft/Slide-img-4.jpg" data-mobil="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://hdimagesnew.com/wp-content/uploads/2015/11/New-Wallpapers-HD.jpg" data-mobil="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://csgowallpapers.com/assets/images/original/mossawi_697490225546_20161227125412_701766109559.png" data-tablet="http://2.bp.blogspot.com/-0xYI1ZJjncM/U0eM2WjhLBI/AAAAAAAAIRk/ytNDG8Nf1x4/s1600/slide-img-1.jpg">
<img src="http://csgowallpapers.com/assets/images/original/mossawi_521575293969_20170108191041_920035389717.png">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>关于javascript - 如何用jquery控制html属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41758933/