以编程方式单击 li 元素 JavaScript

Question

以编程方式（控制台）单击 li 元素“过去 30 天”

<div class="ranges">
      <ul>
        <li>Today</li>
        <li >Yesterday</li> 
        <li>Last 7 days</li>
        <li>Last 30 days</li>
        <li class="">This month</li>
        <li>Custom Range</li>
    </ul>
  </div>

我试了很多方法都失败了

喜欢。

$('#Last 30 days').trigger('click');
$('#Last 30 days').click();

我是新来的 JavaScript 请帮助我

Answer 1

根据里面的HTML触发点击

let listItems = document.querySelectorAll('.ranges li');

listItems.forEach((item, index) => {
  item.addEventListener('click', (event) => {
     alert(`${event.currentTarget.innerHTML} item was click`);
  });
  if (item.innerHTML.indexOf('Last 30 days') != -1) {
      item.click();
  }
});

<div class="ranges">
    <ul>
      <li>Today</li>
      <li>Yesterday</li> 
      <li>Last 7 days</li>
      <li>Last 30 days</li>
      <li>This month</li>
      <li>Custom Range</li>
  </ul>
</div>

Answer 2

你这里的东西看起来像 jQuery（或模仿 jQuery 的东西）——不纯粹、自然 JavaScript。我提到这一点只是为了完整性和正确标记。

也就是说，假设您确实加载了 jQuery，这是失败的，因为您的选择器没有匹配任何内容。 $('#...') 按 ID 匹配 DOM 个元素。您没有任何身份证件。这会起作用：

<div class="ranges">
  <ul>
    <li>Today</li>
    <li >Yesterday</li> 
    <li>Last 7 days</li>
    <li id="target">Last 30 days</li>
    <li class="">This month</li>
    <li>Custom Range</li>
  </ul>
</div>
<script>
  $('#target').click();
</script>

CSS 不按内容寻址元素，jQuery 也不。你可以找到一种方法来实现它，但它会非常低效（这就是为什么它不是内置的）。如果您有选择，最好只识别每个 <li>.

您也可以通过 class 定位：$('.classname')。但是，虽然按 ID 定位通常只会命中一个元素，但按 class 定位会命中所有匹配元素。

我还注意到您似乎没有对 <li> 元素上的 click 事件附加任何操作，因此我不确定您是否会注意到点击事件是成功的，除非你的情况比你描述的更多。

Answer 3

尝试

myLiElement.click();

myLiElement.click();

// this is for TEST
function clicked() { console.log('clicked!') }

<div class="ranges">
  <ul>
    <li>Today</li>
    <li>Yesterday</li>
    <li>Last 7 days</li>
    <li id="myLiElement" onclick="clicked()">Last 30 days</li>
    <li class="">This month</li>
    <li>Custom Range</li>
  </ul>
</div>

以编程方式单击 li 元素 JavaScript

Click li element JavaScript Programmatically

html

javascript

click

html-lists