javascript - 如何使用逻辑运算符 JavaScript 或 jQuery

Question

<div class="image">
<img id="img-1" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-2" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-5" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-15" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-25" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-35" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
<img id="img-50" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
</div>

 $(".image img").each(function() {
        var $this = $(this),
            getClass = $this.attr('img')
        splitClass = $this.prop('id').split("-")
        if (splitClass[1] <= 20) {
            $this.attr("src", "http://lorempicsum.com/futurama/350/200/1");
            this.nextElementSibling.remove();

        } else if (splitClass[1] >= 21) {
            $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
            this.nextElementSibling.remove();

        } else {
            $this.attr("src", "https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif");
        }
    });

>、<、<=、>= 在 jQuery 中如何工作？ 默认图片是default-avatar.gif。 我想要 (splitClass[1] >= 21) img 变化，最小值为 21，最大值为 40。 然后....

else {
        $this.attr("src", "https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif");
            }

将与 default-avatar.gif 一起使用，因为我不会在 jQuery 中更改它。

Answer 1

尝试在.each()循环中用.hide()替换.remove()。您还可以向在 css 设置了 display:none 的元素添加 className，以从 document< 中选择和删除元素 在 .each() 迭代后。

$(".image img").each(function() {
  var $this = $(this),
    getClass = $this.attr('img')
  splitClass = $this.prop('id').split("-")
  if (splitClass[1] <= 20) {
    $this.attr("src", "http://lorempicsum.com/futurama/350/200/1");
    $this.next().hide(); // .addClass("toRemove")
    console.log("less than or equal to 20", splitClass[1] <= 20)
  } else if (splitClass[1] >= 21) {
    $this.attr("src", "http://www.top13.net/wp-content/uploads/2014/11/4-small-flowers.jpg");
    $this.next().hide(); // .addClass("toRemove")
    console.log("greater than or equal to 20", splitClass[1] >= 21)
  } else {
    $this.attr("src", "https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif");
  }
}); // .filter(".toRemove").remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
  <img id="img-1" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-2" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-5" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-15" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-25" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-35" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
  <img id="img-50" src="https://cdn0.vox-cdn.com/images/verge/default-avatar.v9899025.gif" />
</div>