Question

我正在慢慢将此代码转换为我在w3schools上发现的jQuery，并添加了一些我自己的动画，但我无法弄清楚动画可以触发的位置。

也许我对动画的调用是在错误的位置？我每次点击一个新按钮时都试图播放动画。

我注释掉了对animate函数的调用，因为它在单击其他按钮时不起作用。

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>

Answer 1

使用c的唯一其他地方是

行

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

如果c的值为“all”，则应始终输入此if，并且使用indexOf("")将始终返回正数，因此确保始终输入if。

如果您有示例

，则可以将其删除

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

Answer 2

您可以使用自定义动画功能替换RemoveClass和AddClass函数，并将元素和渐变值0传递给隐藏，并将任何其他值大于0以显示效果

将animate功能更新为

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

请参阅下面的演示

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

点击事件逻辑上的jQuery

2 个答案: