Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Искать аналогичный ИД (https://javascript.ru/forum/dom-window/82105-iskat-analogichnyjj-id.html)

dany994 13.03.2021 01:50

Искать аналогичный ИД
 
Всем привет! Подскажите как это сделать, есть к примеру код:

<div class="p1"></div>
<div class="p1"></div>
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p3"></div>

<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>

Нужно что-бы при нажатий к примеру на класс p1, скрипт искал на странице ИД с
аналогичным названием, добавил к нему класс и выполнил события.

Важно что б все работало автоматически (не добавлять для каждого элемента отдельный код), и название классов и ид должны быть одинаковые.

Благодарю!

рони 13.03.2021 08:35

dany994, а если так?
<div data-id="p1"></div> вместо class

dany994 13.03.2021 16:20

Можно и так, не обязательно классы и ид, главное что б название были одинаковые. Только как сделать?

рони 13.03.2021 16:32

dany994,
document.addEventListener( "click" , ({target}) => (target = target.closest("[data-id]")) && (target = document.getElementById(target.dataset.id)) && target.classList.add("active"));

dany994 13.03.2021 17:35

Спасибо! Не подскажите еще как выполнил события при клике на data-id?

рони 13.03.2021 17:44

dany994,
не понимаю

dany994 13.03.2021 18:25

Просто запустить обычную функцию, к примеру как тут:
$( ".p1" ).on( "click", function() {
	   start();
	});


Только в вашем коде, не хочу добавлять отдельный класс к data-id для этого

рони 13.03.2021 18:27

dany994,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .active {
            background-color: #FF0000
        }
    </style>
    <script>
        const start = () => alert("1");
        document.addEventListener("click", ({ target }) => {
            target = target.closest("[data-id]");
            if (target) {
                if (target.classList.contains("test")) start();
                let id = target.dataset.id;
                target = document.getElementById(id)
                if (target) target.classList.add("active")
            }
        })
    </script>
</head>

<body>
    <div data-id="p1" class="test">1</div>
    <div data-id="p1">1</div>
    <div data-id="p1">1</div>
    <div data-id="p2">2</div>
    <div data-id="p3">3</div>
    <div data-id="p3">3</div>
    <div id="p1">1</div>
    <div id="p2">2</div>
    <div id="p3">3</div>
</body>

</html>


Часовой пояс GMT +3, время: 15:29.