如何使用jQuery控制HTML屬性
[英]how to conrol html attribute with jquery
問題描述
我有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>
2 個解決方案
解決方案1
1 已采納 2017-01-20 08:27:52
只需檢查各個data-*屬性的值是否undefined ，然后相應地hide/show ，以及在show上更改src屬性即可。
這是您更新的代碼段。
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>
解決方案2
0 2017-01-20 08:31:26
只需簡單條件即可檢查img data 。 您可以為此使用以下代碼
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'));
}
});
}
}
如何使用jQuery添加HTML屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.