Нажмите li элемент JavaScript программно - PullRequest
Новая
       24

Нажмите li элемент JavaScript программно

2 голосов
/ 07 мая 2019

Программно (консоль) щелкните элемент 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 Пожалуйста, помогите мне

Ответы [ 3 ]

3 голосов
/ 07 мая 2019

Запуск клика на основе 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>
1 голос
/ 07 мая 2019

То, что вы здесь видите, выглядит как jQuery (или что-то по образцу jQuery) - не чистый, естественный JavaScript.Я упоминаю об этом только для полноты и для правильной пометки.

Тем не менее, и, если предположить, что у вас действительно загружен jQuery, это не сработает, потому что ваши селекторы не совпадают ни с чем.$('#...') соответствует элементам 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>.

. Вы также можете выбрать цель по классу: $('.classname').Но в то время как таргетинг по идентификатору обычно затрагивает только один элемент, таргетинг по классу затрагивает все соответствующие элементы.

Я также отмечаю, что к событию click в * не отображается никаких действий.1014 * элементов, поэтому я не уверен, что вы заметите, было ли событие click успешным, если в вашей ситуации есть нечто большее, чем вы описали.

0 голосов
/ 07 мая 2019

попробуй 

function clicked() { console.log('clicked!') }

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