[英]how to conrol html attribute with jquery
I have img
element on my web page and it has data-mobil
and data-tablet
attribute when I resize window my image src is chancing with data-mobil
or data-table
but if my image has not any attribute data-mobil
or data-table
then on responsive my img hasn't be appear on responsive how to do that. 我有img
我的网页上的元素,它具有data-mobil
和data-tablet
的属性,当我调整窗口我的图片src与chancing 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>
Just check whether the value of respective data-*
attribute is undefined
and then hide/show
accordingly along with changing src
attribute on show
. 只需检查各个data-*
属性的值是否undefined
,然后相应地hide/show
,以及在show
上更改src
属性即可。
Here's your updated snippet. 这是您更新的代码段。
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>
Just check img data
with simple condition. 只需简单条件即可检查img data
。 You can use following code for this 您可以为此使用以下代码
function makeResize(){
var imageSrc = $(".myDiv img");
if($(window).width() <=768 && $(window).width()>480){
$(imageSrc).each(function(key,value){
if($(value).data('tablet') == undefined || $(value).data('tablet') == '' || $(value).data('tablet') == null) {
// no src change
} else {
$(value).attr('src',$(value).data('tablet'));
}
});
}else if($(window).width() <=480 ) {
$(imageSrc).each(function(key,value){
if($(value).data('mobil') == undefined || $(value).data('mobil') == '' || $(value).data('mobil') == null) {
// no src change
} else {
$(value).attr('src',$(value).data('mobil'));
}
});
}else{
$(imageSrc).each(function(key,value){
if($(value).data('src') == undefined || $(value).data('src') == '' || $(value).data('src') == null) {
// no src change
} else {
$(value).attr('src',$(value).data('src'));
}
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.