Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 13.08.2016
Сообщений: 22
1

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

26.12.2020, 17:03. Просмотров 982. Ответов 3
Метки нет (Все метки)

Доброго времени суток! Как можно с помощью 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.12.2020, 17:03
Ответы с готовыми решениями:

Как можно отследить нажатие кнопки?
Делаю небольшую игру с помощью SmallBasicLibrary ради практики. Делаю не в SmallBasic, а в Visual...

Как вытащить определенный элемент из SQL
Добрый день, есть вот такой код. &lt;?php require &quot;includes/db.php&quot;; $data=$_POST; $errors =...

Можно ли как-нибудь отследить кто в определенный момент редактирует книгу и какие именно ячейки?
Можно ли как-нибудь отследить кто в определенный момент редактирует книгу и какие именно ячейки?...

Как можно отследить, когда данные сокетом переносятся на уровень сетевого транспорта
К слову об TCP серверах. Как можно отследить тот момент, когда данные были перемещены сокетом из...

3
410 / 262 / 156
Регистрация: 30.04.2017
Сообщений: 516
26.12.2020, 19:14 2
Либо навесить на выдан нужный обработчик уже в коде страницы
Javascript
1
2
3
4
5
// <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)
}))
1
0 / 0 / 0
Регистрация: 13.08.2016
Сообщений: 22
27.12.2020, 12:25  [ТС] 3
Спасибо за ответ! Можно еще вопрос, допустим у меня на странице эти данные подгружается через ajax,
Я уже переделал другую функцию с помощью jQuery:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
1
2
3
4
$('#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
0
410 / 262 / 156
Регистрация: 30.04.2017
Сообщений: 516
27.12.2020, 17:17 4
Цитата Сообщение от Bunnyone Посмотреть сообщение
... ul > li:nth-child(16) > a
эмм, я просто опустил предыдущую часть когда тестировал селектор на вашем примере
подставьте ту часть, что там была ранее,
... это не валидный код, это просто обозначение что я опустил детали которые вы не привели в сообщении
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.12.2020, 17:17

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

Как можно отследить завершение сеанса пользователя чтобы успеть перед этим сохранить данные
Здравствуйте. Я делаю программу которая бы отслеживала время когда пользователь заходит в систему и...

Как вытащить из свойства fields recordset вытащить данные в массив
Как вытащить из свойства fields recordset вытащить данные в массив ассоциативный , подскажите плиз

Как отследить нажатие кнопки?
Приветик, всем!!!! Помогите, пожалуйста, мне надо отследить нажатие на кнопку на другой форме,а на...

Как отследить нажатие кнопки?
можно ли как-нибудь отследить нажатие кнопки на форме без переменных типа bool (вообще без...

Как отследить нажатие в WebBrowser?
При попытке вызвать функцию при нажатии в WebBrowser выдает вот это: А нужно вот что. Что бы...

Как отследить нажатие пальца?
Требуется просто проверить нажат ли палец в определенном месте экрана, если да, то выполнить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.