Как можно отследить нажатие на определенный элемент в списке <li> и вытащить из данные (id)?

@Bunnyone · Регистрация: 13.08.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток! Как можно с помощью js отследить нажатие на определенный элемент в списке <li> и вытащить из этого элемента данные (id), которые находятся на html странице? Но дело в том, что таких элементов на страницы много
Пример нужного элемента:
Нужно отследить нажатие именно на статус Выдан

Код

<a href="#" data-order_id="66749" data-update="false" data-status_id="40" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан</a>

Вот селекторы:

Javascript

1	#table_clients_orders > tr:nth-child(95) > td.center.order-status-col > div > ul > li:nth-child(16) > a

Javascript

1	document.querySelector("#table_clients_orders > tr:nth-child(95) > td.center.order-status-col > div > ul > li:nth-child(16) > a")

Вот целый кусок одного списка:

Кликните здесь для просмотра всего текста

HTML5

<ul class="dropdown-menu fixed-dropdown-menu" aria-labelledby="dropdownStatus_66749" style="position: fixed; top: 140.838px; left: 329.403px; max-height: 4376.07px;">
                                                <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="0" onclick="event.preventDefault(); return change_order_status(this);" style="color:#5171e3">Принят в ремонт</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="2" onclick="event.preventDefault(); return change_order_status(this);" style="color:#fd97a5">На диагностике</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="5" onclick="event.preventDefault(); return change_order_status(this);" style="color:#fd97a5">В процессе ремонта</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="27" onclick="event.preventDefault(); return change_order_status(this);" style="color:#3ab33f">На согласовании</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="52" onclick="event.preventDefault(); return change_order_status(this);" style="color:#5171e3">Дал согласие</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="15" onclick="event.preventDefault(); return change_order_status(this);" style="color:#ff0000">Клиент отказался</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="61" onclick="event.preventDefault(); return change_order_status(this);" style="color:#35d44e">Заказ поставщику</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="10" onclick="event.preventDefault(); return change_order_status(this);" style="color:#7fe7ed">Ожидает запчастей</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="55" onclick="event.preventDefault(); return change_order_status(this);" style="color:#5171e3">Груз прибыл</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="53" onclick="event.preventDefault(); return change_order_status(this);" style="color:#000000">Ждем клиента</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="20" onclick="event.preventDefault(); return change_order_status(this);" style="color:#3ab33f">Не подлежит ремонту</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="54" onclick="event.preventDefault(); return change_order_status(this);" style="color:#3ab33f">Не удалось сделать</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="60" onclick="event.preventDefault(); return change_order_status(this);" style="color:#22a0f5">Тестирование </a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="35" onclick="event.preventDefault(); return change_order_status(this);" style="color:#3ab33f">Готов</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="51" onclick="event.preventDefault(); return change_order_status(this);" style="color:#000000">Готов, уведомили</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="40" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="25" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан без ремонта</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="45" onclick="event.preventDefault(); return change_order_status(this);" style="color:#5b16f0">Принят на доработку</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="50" onclick="event.preventDefault(); return DebitDonor.showCreate(this, 66749);" style="color:#000000">Переведен в донор</a>
                            </li>
                                                            <li>
                                <a href="#" data-order_id="66749" data-update="false" data-status_id="30" onclick="event.preventDefault(); return change_order_status(this);" style="color:#de4dcf">В удаленном сервисе</a>
                            </li>
                                </ul>

Вот 2 примера js селектор и html code, как видите меняются только данные в tr:nth-child

Javascript

1	#table_clients_orders > tr:nth-child(27) > td.center.order-status-col > div > ul > li:nth-child(16) > a

HTML5

1	<a href="#" data-order_id="66701" data-update="false" data-status_id="40" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан</a>

Javascript

1	#table_clients_orders > tr:nth-child(12) > td.center.order-status-col > div > ul > li:nth-child(16) > a

HTML5

1	<a href="#" data-order_id="66746" data-update="false" data-status_id="40" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан</a>

@Ovederax · 26.12.2020, 19:14

Либо навесить на выдан нужный обработчик уже в коде страницы

Javascript

// <a href="#" data-order_id="66749" data-update="false" data-status_id="40" onclick="event.preventDefault(); return change_order_status(this);" style="color:#cfc9c9">Выдан</a>
 
function change_order_status(element) {
  console.log(element.dataset.order_id)
}

либо через querySelectorAll, но у вашего selector-а недостаток в том, что стоит поменять верстку - все разломается
(например место в nt-child - при добавлении других элементов списка)

Javascript

1
2
3

document.querySelectorAll("... ul > li:nth-child(16) > a").forEach(e => e.addEventListener('click', (event) => {
  console.log(event.target.dataset.order_id)
}))

@Bunnyone · 27.12.2020, 12:25 **[ТС]**

Спасибо за ответ! Можно еще вопрос, допустим у меня на странице эти данные подгружается через ajax,
Я уже переделал другую функцию с помощью jQuery:

Javascript

const url_post = "http://127.0.0.1:5000/gen" 
 
$('#body').on('click', '#accordion > div.row.order-nav > div.col-md-10.control > div.order-status-select > div > div > ul > li.order_status-40', function(){
 
    let phone_clinet = (document.querySelector("#main_info > div > div:nth-child(1) > div:nth-child(1) > div.form-group.order-edit-client-phone > a").innerHTML);
    let order =(document.querySelector("#accordion > div.row.order-nav > div.col-md-10.control > div.order-title > h3").innerHTML); 
    x = (order.replace(/[\s№]/g, ''));
    y = (phone_clinet.replace(/\s+/g, ''));
    console.log(x + y)
    $.ajax({
                    method: 'POST',
                    url: url_post,
                    data: {
                        id: x,
                        number: y,
                    }
                });
 
});

Как вот теперь ту функцию изменить, чтоб работала с ajax

Javascript

$('#body').on(document.querySelector("... ul > li:nth-child(16) > a")).forEach(e => e.addEventListener('click', (event) => {
 
  console.log(event.target.dataset.order_id)
}))

Вот так выдает ошибку

Javascript

1	wrnt.js:23 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '... ul > li:nth-child(16) > a' is not a valid selector

@Ovederax · 27.12.2020, 17:17

Сообщение от Bunnyone

... ul > li:nth-child(16) > a

эмм, я просто опустил предыдущую часть когда тестировал селектор на вашем примере
подставьте ту часть, что там была ранее,
... это не валидный код, это просто обозначение что я опустил детали которые вы не привели в сообщении

@Ovederax 603 / 403 / 212 Регистрация: 30.04.2017 Сообщений: 743
	27.12.2020, 17:17	4
	Сообщение от Bunnyone ... ul > li:nth-child(16) > a эмм, я просто опустил предыдущую часть когда тестировал селектор на вашем примере подставьте ту часть, что там была ранее, ... это не валидный код, это просто обозначение что я опустил детали которые вы не привели в сообщении 0