Question

是否有一种简单的方法来单击li元素？我尝试了一些JavaScript方法，但是它们不起作用。我是JavaScript新手，请不要评判我。

我的HTML代码：

<li id="n2" class="Build">
    <a class="inactive" href="newbuild.php" accesskey="2"></a>
</li>

整个HTML代码：

<ul id="navigation">
    <li id="n1" class="Ressources">
        <a class="active" href="Ressources.php" accesskey="1"></a>
    </li>
    <li id="n2" class="Build">
        <a class="inactive" href="newbuild.php" accesskey="2"></a>
    </li>
    <li id="n3" class="map">
        <a href="map.php" accesskey="3"></a>
    </li>
    <li id="n4" class="statistics">
        <a href="stat.php" accesskey="4"></a>
    </li>
    <li id="n5" class="reports">
        <a href="reports.php" accesskey="5"></a>
    </li>
</ul>

我尝试过的JavaScript代码：

document.querySelectorAll('#n2 li.Build').click(); // Not working

document.querySelector('.Build').click(); //Not Working

那么，如何单击此li（带有CSS-Class Build）元素？谢谢。

Answer 1

您想要的是单击a内的li元素，而不是li本身：

document.querySelectorAll('#n2 li.Build a')[0].click(); // This is bad, btw

// This is also bad, performance-wise: engines read from right to left,
// so the most right-hand part of the selector (key selector)
// should be more precise
document.querySelector('.Build a').click();

Answer 2

您需要先使用click分配addEventListener事件监听器，然后才能执行document.querySelector('.Build').click();来触发.Build元素中的点击事件。

document.querySelector('.Build').addEventListener('click', function() {
  alert('clicked');
});

document.querySelector('.Build').click();

<ul id="navigation">
  <li id="n1" class="Ressources">
    <a class="active" href="Ressources.php" accesskey="1"></a>
  </li>
  <li id="n2" class="Build">
    <a class="inactive" href="newbuild.php" accesskey="2"></a>
  </li>
  <li id="n3" class="map">
    <a href="map.php" accesskey="3"></a>
  </li>
  <li id="n4" class="statistics">
    <a href="stat.php" accesskey="4"></a>
  </li>
  <li id="n5" class="reports">
    <a href="reports.php" accesskey="5"></a>
  </li>
</ul>

为什么我的<li>元素上的点击无法正常工作？

2 个答案: