jQuery on click event logic

Question

I'm slowly converting this code to jQuery that I found on w3schools and adding some of my own animations, but I can't figure out where the animation can be triggered.

Perhaps my call to animation is in the wrong spot? I'm trying to play the animation every time you click a new button.

I commented out the call to the animate function because it doesn't work when clicking on other buttons.

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = $(".filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
      RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) 
      AddClass(x[i], "show"); 
      //animate();
  }
}

function animate() {
  $('.filterDiv').fadeTo('slow', 0.5);
}

function AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn-navi");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.filterDiv {
  float:left;
  width: 30%;
  border: 1px solid lightgray;
  background-color: #e3e3e3;
  padding: 15px;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn-navi {
  font-size: 16px;
  border: 1px solid #ed1b2d;
  background-color: white;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

.btn-navi:hover {
  background-color: #ed1b2d;
  border: 1px solid #ed1b2d;
  color: white;
}

.btn-navi.active {
  border: 1px solid #ed1b2d;
  background-color: #ed1b2d;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="myBtnContainer">
  <button class="btn-navi active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn-navi" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn-navi" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn-navi" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn-navi" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars animals">Mustang</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>
</div>

You should only ask one question at a time. Since there isn't really a valid question here about the animation, you're just going to get answers about `c = ""`. — Barmar, May 08 '18 at 20:52
OK, now there's no question anywhere. What is this supposed to do, what is it doing instead? — Barmar, May 08 '18 at 20:56
Don't comment out the part of the code that's giving you a problem. — Barmar, May 08 '18 at 21:00
You could check https://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Liora Haydont, May 08 '18 at 21:01

score 2 · Answer 1 · answered May 08 '18 at 20:51

2

The only other place where c is used is the line

if (x[i].className.indexOf(c) > -1)

If the value of c is "all", this if should always be entered, and using indexOf("") will always return a positive number, so it ensure the if is always entered.

It could be removed if you had by example

if ((x[i].className.indexOf(c) > -1) || c == "all")

answered May 08 '18 at 20:51

Liora Haydont

1,252
1
12
25

He's removed this part of the question. – Barmar May 08 '18 at 20:55
Thanks Liora, I've removed that part of the questions since there were two parts to this question. My actual question is about the animation, but this helped me thank you. – Nick0989 May 08 '18 at 20:55
1

Ah xD I didn't see you removed it, sorry. – Liora Haydont May 08 '18 at 21:00

score 1 · Accepted Answer · answered May 08 '18 at 21:18

You can replace the RemoveClass and AddClass function with your custom animation function and pass the element and the fading value 0 to hide and any other value greater than 0 to show the effect.

Update the animate function to

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}

See a demo below

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = $(".filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    animateIt(x[i], 0);
    //RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1)
      animateIt(x[i], 0.5);
    //AddClass(x[i], "show"); 

  }
}

function animateIt(obj, fadeTo) {
  if (fadeTo == 0) {
    return $(obj).css('display', 'none');
  }
  $(obj).fadeTo('slow', fadeTo);
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn-navi");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.filterDiv {
  float: left;
  width: 30%;
  border: 1px solid lightgray;
  background-color: #e3e3e3;
  padding: 15px;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}


/* Style the buttons */

.btn-navi {
  font-size: 16px;
  border: 1px solid #ed1b2d;
  background-color: white;
  outline: none;
  padding: 12px 16px;
  cursor: pointer;
}

.btn-navi:hover {
  background-color: #ed1b2d;
  border: 1px solid #ed1b2d;
  color: white;
}

.btn-navi.active {
  border: 1px solid #ed1b2d;
  background-color: #ed1b2d;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="myBtnContainer">
    <button class="btn-navi active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn-navi" onclick="filterSelection('cars')"> Cars</button>
    <button class="btn-navi" onclick="filterSelection('animals')"> Animals</button>
    <button class="btn-navi" onclick="filterSelection('fruits')"> Fruits</button>
    <button class="btn-navi" onclick="filterSelection('colors')"> Colors</button>
  </div>

  <div class="container">
    <div class="filterDiv cars">BMW</div>
    <div class="filterDiv colors fruits">Orange</div>
    <div class="filterDiv cars">Volvo</div>
    <div class="filterDiv colors">Red</div>
    <div class="filterDiv cars animals">Mustang</div>
    <div class="filterDiv colors">Blue</div>
    <div class="filterDiv animals">Cat</div>
    <div class="filterDiv animals">Dog</div>
    <div class="filterDiv fruits">Melon</div>
    <div class="filterDiv fruits animals">Kiwi</div>
    <div class="filterDiv fruits">Banana</div>
    <div class="filterDiv fruits">Lemon</div>
    <div class="filterDiv animals">Cow</div>
  </div>
</div>

jQuery on click event logic

2 Answers2