Блог

Главная - Вопросы по программированию - как получить конкретный элемент внутри элемента при нажатии

как получить конкретный элемент внутри элемента при нажатии

#javascript #html

Вопрос:

У меня есть этот код, который будет console.log innerHTML для элемента списка, на который нажимается, он отлично работает

Но я хотел использовать только console.log innerHTML элемент span с классом «x», который находится внутри списка

как я могу это сделать?

 function myfunction() {
  let items = document.querySelectorAll("#ol li"),
    array = [];
  for (var i = 0; i < items.length; i  ) {
    array.push(items[i].innerHTML);
  }

  for (var i = 0; i < items.length; i  ) {
    items[i].onclick = function() {
      console.log(this.innerHTML)
    }
  };
} 
 <ol id="ol">
  <li>
    <span class="x">hello</span>
    <span class="xx">testing</span>
  </li>
  <li>
    <span class="x">hello2</span>
    <span class="xx">testing2</span>
  </li>
  <li>
    <span class="x">hello3</span>
    <span class="xx">testing4</span>
  </li>
  <li>
    <span class="x">hello4</span>
    <span class="xx">testing4</span>
  </li>
</ol>

<button onclick="myfunction()">click</button>

Комментарии:

1. то, о чем вы спрашивали, уже происходит в вашем коде, что еще вам нужно?

Ответ №1:

Вместо размещения прослушивателя на каждом li из них вы можете воспользоваться преимуществами делегирования событий , разместив один обработчик на ol :

 <ol id="ol">
  <li>
    <span class="x">hello</span>
    <span class="xx">testing</span>
  </li>
  <li>
    <span class="x">hello2</span>
    <span class="xx">testing2</span>
  </li>
  <li>
    <span class="x">hello3</span>
    <span class="xx">testing4</span>
  </li>
  <li>
    <span class="x">hello4</span>
    <span class="xx">testing4</span>
  </li>
</ol>

<button id="button">click</button>
 
 'use strict';

const button = document.querySelector('#button');

const findLI = el => {
  if (el.tagName.toLowerCase() === 'li') {
    return el;
  }
  
  return findLI(el.parentElement);
};

const registerItemsClickHandler = () => {
  const ol = document.querySelector('#ol');
  
  ol.onclick = event => {
    const li = findLI(event.target);
    console.log(li.innerHTML);
  };
};

button.onclick = registerItemsClickHandler;

Обратите внимание, что мы регистрируем только один обработчик щелчка (на ol ) и можем использовать event.target его для определения конкретного элемента, на который было отправлено событие. Также стоит отметить, что дочерний элемент любой глубины дерева может быть целью отправки , поэтому мы можем использовать рекурсивную findLI() функцию, чтобы найти первого родителя, который является an li , если el он сам таковым не является.

Метки: