如何在屏幕尺寸上隐藏元素？

Question

我正在使用this plugin 将我的图像交换为 3 个屏幕：

desktop,tablet 和 mobil

我正在使用引导轮播和这个插件一起使用。

所以我有 3 个屏幕分辨率，我也想具体一点。所以我想做的是：

正如您在下面的示例中看到的，我的设备属性有 3 个分辨率：

data-large,data-medium,data-small.

我想检查一下我的屏幕尺寸：

如果我的屏幕大于 0px 并且我的 data-small 属性为空 或未定义然后显示下一张幻灯片（或隐藏自己）

如果我的屏幕大于 480 像素并且我的 data-medium 属性是 为空或未定义然后显示下一张幻灯片（或隐藏它）

如果我的屏幕大于 1024px 并且我的 data-large 属性是 为空或未定义然后显示下一张幻灯片（或隐藏它）

我想做什么？

如果我没有适用于移动设备的图像，我想隐藏它们，这就是我要问的原因。而我做不到。

我的物品有.active 类可能可以用我试过的这个类来处理，但我没有任何例子？

! function(e) {
  e.fn.imageR = function(a) {
    function i(e, i, r, u, n) {
      $mediaQuery < a.large ? $mediaQuery < a.medium ? $mediaQuery < a.small || (n ? e.attr("src", i) : e.css("background-image", "url(" + i + ")")) : n ? e.attr("src", r) : e.css("background-image", "url(" + r + ")") : n ? e.attr("src", u) : e.css("background-image", "url(" + u + ")")
    }

    function r() {
      $imageR.each(function() {
        var e = jQuery(this),
          a = e.data("small"),
          r = e.data("medium"),
          u = e.data("large"),
          n = !1;
        (void 0 === r || null === r) && (r = u), (void 0 === a || null === a) && (a = r), e.is("img") && (n = !0), i(e, a, r, u, n)
      })
    }
    var u = {
      small: "0",
      medium: "480",
      large: "1024"
    };
    a = e.extend(u, a), $imageR = jQuery(this), $mediaQuery = jQuery(window).width(), r(), jQuery(window).on("resize", function() {
      $mediaQuery = jQuery(window).width(), r()
    })
  }
}(jQuery);
$(document).ready(function() {
  $(".lazy_banner").imageR({
    small: "0",
    medium: "480",
    large: "1024"
  });
  lazyBanner();
});

function lazyBanner() {
  var s = $(window).width();
  if (s > 1024) {
    $.each($(".active img"), function() {
      var lgData = $(this).data('large');
      if (lgData == "" || lgData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 480) {
    $.each($(".active img"), function() {
      var mdData = $(this).data('medium');
      if (mdData == "" || mdData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  } else if (s > 0) {
    $.each($(".active img"), function() {
      var smData = $(this).data('small');
      if (smData == "" || smData == undefined) {
        $('#myCarousel').carousel('next');
      }
    })
  }
}

$(window).on('resize load', function() {
  lazyBanner();
});

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  width: 100%;
  height: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img class="lazy_banner" data-large="https://image.ibb.co/dh3MSk/desktop_1.jpg" data-medium="" data-small="https://image.ibb.co/bVYc05/mobil.jpg">
      </div>
      <div class="item">
        <img class="lazy_banner" data-large="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg" data-medium="https://images.pexels.com/photos/30865/pexels-photo-30865.jpg" data-small="https://images.pexels.com/photos/122429/leaf-nature-green-spring-122429.jpeg">
      </div>

      <div class="item">
        <img class="lazy_banner" data-large="" data-medium="https://www.jssor.com/demos/img/gallery/980x380/013.jpg" data-small="https://www.jssor.com/demos/img/gallery/980x380/015.jpg">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

CodePen Demo

Answer 1

你可以像下面这样实现

 $( window ).resize(function() {
         if($(window).width() < 600) { // set desired width condition
             $.each($(".carousel-inner img"), function(){
                   if($(this).attr("data-small") == "")
                      $(this).fadeOut("slow");
             })
         }
    });