试图找出如何使用“ this”寻址单个菜单项]]

Question

[我想做的是使用“ 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中变得未定义

[我想做的是使用“ this”像数组一样记录结果，以便每当我单击第一个列表项时都将数字0登录到console.log中，没有预定义的变量并且仅使用一个...

Answer 1

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

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

Answer 2

您需要在函数中传递this：onclick="openMenuItemAll(this);然后，您可以从数组中获取目标的索引。

话虽如此，只要您单击<li>元素中的任意位置，onclick事件就会发生。如果仅希望在单击按钮时触发事件，则需要将事件放在按钮内。由于按钮是li的子代，因此您需要传递this.parentElement才能将<li>传递给函数。

Answer 3

Quentin有您的答案，但也可以考虑使用event delegation使代码更具扩展性：