以編程方式單擊 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 元素。 您沒有任何 ID。 這會起作用：

<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> 。

您還可以按類別定位： $('.classname') 。 但是，雖然按 ID 定位通常只會命中一個元素，但按類定位將命中所有匹配的元素。

我還注意到，您似乎沒有對<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>