Форум

dany994 · #1 (**permalink**) 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, скрипт искал на странице ИД с
аналогичным названием, добавил к нему класс и выполнил события.

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

Благодарю!

рони · #2 (**permalink**) 13.03.2021, 08:35

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

dany994 · #3 (**permalink**) 13.03.2021, 16:20

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

рони · #4 (**permalink**) 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 · #5 (**permalink**) 13.03.2021, 17:35

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

рони · #6 (**permalink**) 13.03.2021, 17:44

dany994,
не понимаю

dany994 · #7 (**permalink**) 13.03.2021, 18:25

Просто запустить обычную функцию, к примеру как тут:

$( ".p1" ).on( "click", function() {
	   start();
	});

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

рони · #8 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript