时间戳

首页 > 解决方案 > 试图找出如何使用“this”来处理单个菜单项

javascript - 试图找出如何使用“this”来处理单个菜单项

问题描述

我想要做的是使用“this”（如数组）记录结果，以便每当我单击第一个列表项时，数字 0 都会记录在 console.log 中，没有预定义的变量并且只使用一个函数。

<ul class="menuList">
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Chicken Cordon Bleu</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Chicken Stir Fry</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Chicken Thighs</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Fish Fillet</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Lasagna</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Pizza</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Salmon</a></li>
    <li><a class="menuImage" onclick="openMenuItemAll();"><button>&#8250;</button>Spaghetti</a></li>
</ul>
<script type="text/javascript">
    function openMenuItemAll(){
    var menuImage = document.querySelectorAll(".menuImage");
    console.log(this.menuImage);
}
</script>

当我尝试根据菜单项的位置获取数组编号时，console.log 中出现未定义

标签： javascriptarraysthisundefined

解决方案

的值this取决于函数的调用方式。

事件处理程序函数将this等于事件处理程序绑定到的元素。

所以onclick="this /* is the element */"

在没有上下文的情况下调用的函数（例如，如果您调用openMenuItemAll();）this等于undefined（除非您未能触发严格模式，在这种情况下它将是window）。

旁白：<a>用于链接。如果您没有在任何地方链接，请不要使用它。禁止在链接内放<button>！

首先，修复您的标记：

<ul class="menuList">
    <li><button>&#8250;</button>Chicken Cordon Bleu</li>

请注意，链接已删除，我没有转移，class因为您可以从列表本身的类中推断出它。

然后选择所有按钮：

const buttons = document.querySelector(".menuList button");

然后循环按钮并将您的openMenuItemAll函数绑定为事件处理程序。

Array.from(buttons).forEach(
    button => button.addEventListener("click", openMenuItemAll)
);

推荐阅读