时间戳

首页 > 解决方案 > 以编程方式单击 li 元素 JavaScript

javascript - 以编程方式单击 li 元素 JavaScript

问题描述

以编程方式单击 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 新手请帮助我

标签： javascripthtmlclickhtml-lists

解决方案

触发基于 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>

推荐阅读