不能循环通过单击事件-函数错误出现循环通过该单击事件？！这个循环不知怎么不起作用

Question

div元素应该自我解释，它们都有相同的类- querySelectorAll。是否也需要将函数moveElements放到另一个循环中，如果-如何实现呢？控制台错误通知是:无法设置未定义的属性(设置“宽度”)，但它在只有一个事件侦听器时工作。^^

const arrowEase = document.querySelectorAll('.arrow-start');

for (var i = 0 ; i < arrowEase.length; i++) {
    arrowEase[i].addEventListener('click', moveElements); 
}

function moveElements(){
    function moveit(timestamp, el, dist, duration) {

        var timestamp = timestamp || new Date().getTime()
        var runtime = timestamp - starttime
        var progress = runtime / duration
        var dist = 600
        progress = Math.min(progress, 1)
        el.style.width = (dist * progress).toFixed(2) + 'px'
        if (runtime < duration) {
            requestAnimationFrame(function (timestamp) {
                moveit(timestamp, el, dist, duration)
            })
        }
    }

    requestAnimationFrame(function (timestamp) {
        starttime = timestamp || new Date().getTime()
        moveit(timestamp, arrowEase, 400, 1000)
    })
};

请求html：

    <div id="impress">
      <div class="no-support-message">
        Your browser doesn't support impress.js. Try Chrome or Safari.
      </div>
      
      <div class="step" data-x="0" data-y="0">
        <div class="header-style header-backlayer"><h1>Assistance-Leistungen bei Arbeitslosigkeit</h1></div>
        <div class="container-step-1">
          <div class="arrow-start">
          
            <div class="arrow-1">
              <div class="diamond">
              </div>
            </div>
          
            <div class="arrow-2">
              <div class="diamond">
              </div>
            </div>
          
            <div class="arrow-3">
              <div class="diamond">
              </div>
            </div>
            
          </div>

          <div class="modal">
            <div class="modal-content header-style">
              <span class="close-button">&times;</span>
              <h1>Bitte navigieren Sie mit den Pfeiltasten über die Seiten!</h1>
            </div>
          </div>
        </div>
      </div>
  </div>

这起作用了--尽管在电视上也有一点小错误。

const arrowEase = document.querySelectorAll('.arrow-start');

for (var i = 0 ; i < arrowEase.length; i++) (function(i){
    arrowEase[i].addEventListener('click', onclick);

    arrowEase[i].onclick = function(){
        function moveit(timestamp, els, dist, duration) {

            var timestamp = timestamp || new Date().getTime()
            var runtime = timestamp - starttime
            var progress = runtime / duration
            var dist = 600
            progress = Math.min(progress, 1)
            els.forEach(el => {
              el.style.width = (dist * progress).toFixed(2) + 'px'
            })
            if (runtime < duration) {
                requestAnimationFrame(function (timestamp) {
                    moveit(timestamp, els, dist, duration)
                })
            }
        }
    
        requestAnimationFrame(function (timestamp) {
            starttime = timestamp || new Date().getTime()
            moveit(timestamp, arrowEase, 400, 1000)
        })
    }
    
})(i);

Answer 1

您非常接近解决方案，但您将元素数组作为1元素传递。尝试像这样修改它：

function moveElements(event){
    function moveit(timestamp, els, dist, duration) {

        var timestamp = timestamp || new Date().getTime()
        var runtime = timestamp - starttime
        var progress = runtime / duration
        var dist = 600
        progress = Math.min(progress, 1)
        els.forEach(el => {
          el.style.width = (dist * progress).toFixed(2) + 'px'
        })
        
        if (runtime < duration) {
            requestAnimationFrame(function (timestamp) {
                moveit(timestamp, els, dist, duration)
            })
        }
    }

    requestAnimationFrame(function (timestamp) {
        starttime = timestamp || new Date().getTime()
        moveit(timestamp, arrowEase, 400, 1000)
    })
};

Answer 2

看起来，当您第一次设置相同的两个参数时，由于事件在这两个参数中都是唯一的，假设最后一个元素获得了事件，它将被重写。

第二个例子是在处理程序中定义一个函数，这样它就可以显示一个新的引用，并且可以与其他引用区分开来。