Question

我试图弄清楚如何将addEventListener('scroll')循环中的变量传递给(function parallax() { let p = document.querySelectorAll('.js-parallax'), i = 0, m p.forEach(function (el, m) { i % 2 == 0 ? m = 1 : m = 2 i++ console.log('m: ' + m + ' and i: ' + i) document.addEventListener('scroll', function(m) { console.log('And now m: ' + m + ' and i: ' + i) }) }); })()方法。

这是一个小提琴：

＆＃13;

body {
  min-height: 2000px;
}

＆＃13;

<body>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
</body>

＆＃13;

我们的想法是使用自定义Parallax脚本，其中p是一个乘数，i中两个项目中的一个不同。我先使用m = 1，如果它是奇数，m = 2，如果它是偶数m。

您将在代码段控制台中看到addEventListener()在循环内被公认，但在m = [object Event]之外。第二个控制台日志输出class CustomTextView: UITextView { required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) accessibilityTraits = accessibilityTraits | UIAccessibilityTraitAdjustable } override func accessibilityDecrement() { print("Decrement") } override func accessibilityIncrement() { print("Increment") } }。从这里开始，我有点卡住了。

有任何线索吗？提前谢谢，

一个。

Answer 1

您无法将参数发送到侦听器功能。侦听器的参数只有一个且始终是Event对象。

相反，您可以为目标元素添加属性。如下所示

p.forEach(function(el, m) {
    i % 2 == 0 ? m = 1 : m = 2
    i++
    el.multiplier = m;

然后，您可以在侦听器函数中使用该属性。

document.addEventListener('scroll', function(e) {
       console.log(e.target.multiplier);
    })

Answer 2

您在触发滚动事件时重新打印事件参数。
您将i的结果分配给唯一的滚动事件，我的意思是，您在每个循环中覆盖事件scroll。因此，您的滚动事件将使用i = 5;

使用正确的变量m和正确的事件参数查看此代码段。

＆＃13;

(function parallax() {
  let p = document.querySelectorAll('.js-parallax'),
    i = 0,
    m

  p.forEach(function(el, m) {
    i % 2 == 0 ? m = 1 : m = 2
    i++

    console.log('m: ' + m + ' and i: ' + i)

    document.addEventListener('scroll', function(e) {
      console.log('And now event: ' + JSON.stringify(e) + ' - m: ' + m + ' and i: ' + i)
    })
  });
})()

＆＃13;

body {
  min-height: 2000px;
}

＆＃13;

<body>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
</body>

＆＃13;

Answer 3

感谢@all的回答。

所以我重新考虑了我的剧本，我实际上是颠倒了我的逻辑。最好的方法是使用document.addEventListener('scroll')和使用forEach函数。它就像一个魅力。

(function parallax() {
    let p = document.querySelectorAll('.js-parallax'),
        i = 0,
        m

    document.addEventListener('scroll', () => {
        p.forEach((el, m) => {  
            i % 2 == 0 ? m = 1 : m = 2
            i++

            console.log('m: ' + m + ' and i: ' + i)
        });
    })
})()

问题可以关闭！谢谢大家：）

Answer 4

您需要在i（在这种情况下为m）的范围内声明.forEach()和.map()，以便不会覆盖它。我还将event从scroll更改为mousewheel，以便您了解Map的工作原理。只需使用滚轮而不是滚动条滚动页面：

＆＃13;

(function parallax() {
  let p = Array.from(document.querySelectorAll('.js-parallax'))

  let map = new Map(p.map(function(el, i) {
    let m = i % 2 == 0 ? 1 : 2

    console.log('m: ' + m + ' and i: ' + i)

    return [el, { m, i }]
  }))

  document.addEventListener('mousewheel', function(event) {
    let el = event.target
    
    if (map.has(el)) {
      const { m, i } = map.get(el)

      console.log('And now m: ' + m + ' and i: ' + i)
    }
  })
})()

＆＃13;

:root {
  --console-height: 88px;
  --margin: 0.5em;
  --parallax-height: 100vh;
}

.js-parallax {
  height: calc(var(--parallax-height) - var(--margin) * 2 - var(--console-height));
  background-color: cyan;
  margin: var(--margin);
}

body {
  margin: 0;
  padding-bottom: var(--console-height);
}

.as-console-wrapper {
  max-height: var(--console-height) !important;
}

＆＃13;

<body>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
  <div class="js-parallax"></div>
</body>

＆＃13;

将变量从ForEach传递给addEventListener

4 个答案: