我如何为每个相同的Class元素将此js函数用于document.querySelectorAll

RR Suthar 发表于 Dev

RR苏萨尔

这是在复选框处于活动状态后运行的动画效果。没关系，但这仅适用于的一个元素class="text"。但我想将其用于具有的每个元素class="text"。

我该怎么做，我尝试了这种方法，但是没有成功。

我的整个代码在这里：

function myTYPINGFunction() {
  var checkBox = document.getElementById("myCheck");
  var textWrapper = document.querySelector('.text');

  if (checkBox.checked == true) {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
      return `<span class="word">` +
        m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
        `</span>`;
    });

    var targets = Array.from(document.querySelectorAll('.text .letter'));

    anime.timeline({
        loop: true,
      })
      .add({
        targets: targets,
        scale: [3, 1],
        scaleY: [1.5, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 400,
        delay: (el, i) => 60 * i
      }).add({
        opacity: 0,
        duration: 50000,
        easing: "easeOutExpo",
        delay: 800
      })
    $(".text").removeClass('zoomIn2');

  } else {
    setTimeout(function() {
      textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>]+)>)/gi, "");
    }, 550);


    var targets = Array.from(document.querySelectorAll('.text .letter'));

    anime.timeline({
        loop: false,
      })
      .add({
        targets: targets.reverse(),
        scale: [1, 2],
        scaleY: [1, 1.5],
        opacity: [1, 0],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 30,
        delay: (el, i) => 25 * i
      });
    setTimeout(function() {
      $(".text").addClass('zoomIn2');
    }, 500);
  }

}

.word {
  border: 1px solid red;
}

.letter {
  border: 1px solid lightblue;
}

input.largerCheckbox {
  width: 20px;
  height: 20px;
}

.zoomIn2 {
  animation: zoomIn2 1000ms both
}

@keyframes zoomIn2 {
  from {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  50% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label>
<input type="checkbox" id="myCheck" class="largerCheckbox" onclick="myTYPINGFunction()">

<h1 class="text">Checkbox is CHECKED!</h1>
<h1 class="text">Checkbox is CHECKED!</h1>

我希望h1 class="text"对所有元素具有与第一相同的效果class="text"

即使需要更改类名，也没关系

<h1 class="text_1">Checkbox is CHECKED!</h1>
<h1 class="text_2">Checkbox is CHECKED!</h1>

马雷克（Marek Szkudelski）

您需要使用class获得所有元素text，并对这些元素进行迭代。您可以通过方法querySelectorAll代替querySelector。

querySelector 始终只会返回您第一个匹配的元素。

然后，您可以使用forEach方法遍历类文本中的每个元素。您的动画将添加到每个元素。

这是您需要更改的部分代码：

 var textWrappers = document.querySelectorAll('.text');
      
textWrappers.forEach( textWrapper => {

另外，您需要更改此行：

var targets = Array.from(textWrapper.querySelectorAll('.letter'));

这是工作代码：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


    <style>
    .word {border: 1px solid red;}
    .letter {border: 1px solid lightblue;}
        input.largerCheckbox { 
                width: 20px; 
                height: 20px; 
            } 

    .zoomIn2 {
        animation: zoomIn2 1000ms both
    }
    @keyframes zoomIn2 {
        from {
            opacity: 0;
            transform: scale3d(0, 0, 0);
        }

        50% {
            opacity: 1;
        }
    }

    </style>

    <label for="myCheck" style="color:red; font-size:20px;"><b>Typing.Eff:</b></label> 
    <input type="checkbox" id="myCheck" class="largerCheckbox" onclick="myTYPINGFunction()">

    <h1 class="text" >Checkbox is CHECKED!</h1>
    <h1 class="text" >Checkbox is CHECKED!</h1>

    <script>
    function myTYPINGFunction() {
      var checkBox = document.getElementById("myCheck");
      var textWrappers = document.querySelectorAll('.text');
      
textWrappers.forEach( textWrapper => {
      if (checkBox.checked == true){
        textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
      return `<span class="word">` +
        m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
        `</span>`;
    });

    var targets = Array.from(textWrapper.querySelectorAll('.letter'));

    anime.timeline({
      loop: true,
    })
      .add({
        targets: targets,
        scale: [3,1],
        scaleY: [1.5,1],
        opacity: [0,1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 400,
        delay: (el, i) => 60*i
        }).add({
        opacity: 0,
        duration: 50000,
        easing: "easeOutExpo",
        delay: 800
      })
      $(".text").removeClass('zoomIn2');
      
      } else {
        setTimeout(function(){ 
         textWrapper.innerHTML = textWrapper.textContent.replace(/(<([^>]+)>)/gi, "");
         }, 550);
         
         
         var targets = Array.from(document.querySelectorAll('.text .letter'));

    anime.timeline({
      loop: false,
    })
    .add({
        targets: targets.reverse(),
        scale: [1,2],
        scaleY: [1,1.5],
        opacity: [1,0],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 30,
        delay: (el, i) => 25*i
      }); 
      setTimeout(function(){ 
      $(".text").addClass('zoomIn2');
      }, 500);
      }
       })
    }
    </script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。