Question

我的网页上有img个元素，当我调整窗口大小时，我的图片src正在使用data-mobil或{{1}进行搜索时，它具有data-tablet和data-mobil属性但是如果我的图片没有任何属性data-table或data-mobil，那么在响应时我的img就没有出现在响应如何做到这一点上。

data-table

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%;}

Answer 1

只需检查相应data-*属性的值是undefined然后hide/show，还是更改src上的show属性。

这是您更新的代码段。

＆＃13;

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();
});

＆＃13;

.myDiv {
  width: 900px
}
.myDiv img {
  display: block;
  margin: 20px;
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 2

只需检查条件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属性

2 个答案: