how to conrol html attribute with jquery

Question

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.

 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>

Answer 1

Just check whether the value of respective data-* attribute is undefined and then hide/show accordingly along with changing src attribute on show .

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>

Answer 2

Just check img data with simple condition. 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'));
      } 
    });
  }
}

how to conrol html attribute with jquery

Question

2 answers

solution1
1 ACCPTED 2017-01-20 08:27:52

solution2
0 2017-01-20 08:31:26

how to conrol html attribute with jquery

Question

2 answers

solution1 1 ACCPTED 2017-01-20 08:27:52

solution2 0 2017-01-20 08:31:26

solution1
1 ACCPTED 2017-01-20 08:27:52

solution2
0 2017-01-20 08:31:26