javascript - 隐藏没有特定属性的 DOM 元素

Question

我想在 767px 上隐藏所有没有 data-web-src 属性的图像。我尝试了以下但失败了；我怎样才能做到这一点？

$('#homepage-carousel .lazy_res').each(function(index, value) {
   var ws = $(window).width();
    var large = 1024;
    var medium = 767;
    var small = 0;
  if (ws <= medium) {
    $(this).not('[data-web-src]').hide();

  } else {
    $(this).not('[data-web-src]').show();
  }

});

img {
  width: 500px;
  float: left;
  margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
  <img class="lazy_res" src="http://pre07.deviantart.net/338a/th/pre/i/2012/007/f/7/mapa_mundi_com_bandeiras___preto_by_plamber-d4leocd.jpg" alt="" />

  <img class="lazy_res" src="http://img05.deviantart.net/a6be/i/2013/099/8/9/helena_harper_by_plamber-d6125tx.jpg">
</div>

Codepen Demo

Answer 1

这应该用 CSS Media Queries 完成 。无需 JavaScript。

/* Set page default styles and styles that should only
   be in effect for viewports under 767px wide here. */

img {
  width: 500px;
  float: left;
  margin-right: 10px;
}

/* Apply the following CSS only to viewports wider than 767px */
@media (min-width: 767px) {
  /* Select all images except those with an attribute of: dat-web-src */
  img:not([data-web-src]) {
    display: none; /* Hide the matching elements */
  }
  
  /* Make any other CSS changes you like here */
  
  /* This class will only be applied to images when the media query
     is in effect. */
  img.someNewClass {
    /* Whatever you need here */
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-carousel">
  <img class="lazy_res" src="http://localhost:82/works/anitur/img/slider/1.jpg" alt="" />

  <img class="lazy_res" src="http://localhost:82/works/anitur/img/assets/mice-1.jpg">
</div>