javascript - 使用 forEach 迭代 NodeList 时如何仅使用绑定(bind)而不是调用?

标签 javascript reactjs javascript-objects bind

我是 Javascript 编程新手。所以请解释一下我可以在此处使用绑定(bind)吗。此菜单的灵感来自 YouTube 上的左侧菜单。当点击菜单标签和图标时,主菜单出现在下方,菜单图标向右滑动,标签向上滑动。要关闭菜单,需要再次单击菜单图标。

var menu = (function() {

      function initiate() {
        //[].slice.call I used by using call but i want to to by binding and I am not able to do.
        [].slice.bind(null, document.querySelectorAll('.menu')).forEach(function(element, i) {

            var titleclick = el.querySelector('div.d-striker'),
              striker.addEventListener('click', function(event) {
                if (!open) {
                  el.className += ' dr-menu-open';
                  open = true;
                }
              }, false);

            icon.addEventListener('click', function(event) {
              if (open) {
                event.stopPropagation();
                open = false;
                el.className = el.className.replace(/\bdr-menu-open\b/, '');
                return false;
              }
            }, false);
          }

          initiate();

        })();
<div class="side">
  <nav class="menu">
    <div class="d-striker">
      <span class="d-icon dr-icon-menu"></span><a class="dr-label">Account</a>
    </div>
    <ul>
      <li><a class="d-icon dr-icon-user" href="#">icon</a></li>
      <li><a class="d-icon dr-icon-cam" href="#">Videos</a></li>

      <li><a class="d-icon dr-icon-download" href="#">Downloads</a></li>
      <li><a class="d-icon dr-icon-settings" href="#">Settings</a></li>
    </ul>
  </nav>
</div>

最佳答案

bind() 返回一个绑定(bind)函数,但您需要调用该函数来获取 forEach 所需的数组。添加括号来调用该函数。

[].slice.bind(null, document.querySelectorAll('.menu'))().forEach(function(element, i) {
                                                       ^^

关于javascript - 使用 forEach 迭代 NodeList 时如何仅使用绑定(bind)而不是调用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52116135/

相关文章:

javascript - 使用属性名称在 javascript 中查找对象的索引

javascript - JavaScript 中的 'Execution Context' 到底是什么?

javascript - 如何使用 JSDoc 验证/检查类型?

javascript - React-window,如何防止状态更改时重新渲染列表?

javascript - 我如何在 react 中只允许数字输入,例如,如果有人尝试复制粘贴文本

javascript - 如何使用 Angular 或javascript将所有对象键推送到数组中的单独数组?

javascript - 分割字符串并返回对象

javascript - Item 上的 Canvas 鼠标移动事件

javascript - puppeteer page.evaluate 路径与测试 ID

javascript - React Native 中的导航问题 - 正确组织