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

How to use logistic operator JavaScript or jQuery

本文关键字：jQuery JavaScript 逻辑运算符 何使用      更新时间：2024-03-27
<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 中工作？默认 img 是默认头像.gif。我想(splitClass[1] >= 21)最小值的 IMG 变化是 21，最大值是 40。然后....

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

将适用于默认头像.gif因为我不会在 jQuery 中更改它。

尝试在循环

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

$(".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>

相关文章：