Karl Friedchicken Karl Friedchicken - 6 months ago 16
Javascript Question

How to use logistic operator JavaScript or jQuery

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


How does > , < , <= , >= work in jQuery ?
the default img is default-avatar.gif.
i want
(splitClass[1] >= 21)
the img change with min is 21 and the max is 40.
and then the....

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


will work with default-avatar.gif because i dont change it in jQuery.

Answer

Try substituting .hide() for .remove() within .each() loop. You can also add a className to the elements where display:none is set at css to select and remove the elements from document after iteration at .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>

Comments