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
– Barmar, Commented May 8, 2018 at 20:52
OK, now there's no question anywhere. What is this supposed to do, what is it doing instead? — Barmar
– Barmar, Commented May 8, 2018 at 20:56
Don't comment out the part of the code that's giving you a problem. — Barmar
– Barmar, Commented May 8, 2018 at 21:00

Liora Haydont · Accepted Answer · 2018-05-08 20:51:25Z

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 8, 2018 at 20:51

Liora Haydont

1,2931 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Barmar Over a year ago

He's removed this part of the question.

Nick0989 Over a year ago

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.

Liora Haydont Over a year ago

Ah xD I didn't see you removed it, sorry.

Muhammad Omer Aslam · Accepted Answer · 2018-05-08 21:18:35Z

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>

Collectives™ on Stack Overflow

jQuery on click event logic

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related