Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.03.2021, 00:50
Интересующийся
Отправить личное сообщение для dany994 Посмотреть профиль Найти все сообщения от dany994
 
Регистрация: 21.12.2015
Сообщений: 23

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

<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, 07:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

dany994, а если так?
<div data-id="p1"></div> вместо class
Ответить с цитированием
  #3 (permalink)  
Старый 13.03.2021, 15:20
Интересующийся
Отправить личное сообщение для dany994 Посмотреть профиль Найти все сообщения от dany994
 
Регистрация: 21.12.2015
Сообщений: 23

Можно и так, не обязательно классы и ид, главное что б название были одинаковые. Только как сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 13.03.2021, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

dany994,
document.addEventListener( "click" , ({target}) => (target = target.closest("[data-id]")) && (target = document.getElementById(target.dataset.id)) && target.classList.add("active"));
Ответить с цитированием
  #5 (permalink)  
Старый 13.03.2021, 16:35
Интересующийся
Отправить личное сообщение для dany994 Посмотреть профиль Найти все сообщения от dany994
 
Регистрация: 21.12.2015
Сообщений: 23

Спасибо! Не подскажите еще как выполнил события при клике на data-id?
Ответить с цитированием
  #6 (permalink)  
Старый 13.03.2021, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

dany994,
не понимаю
Ответить с цитированием
  #7 (permalink)  
Старый 13.03.2021, 17:25
Интересующийся
Отправить личное сообщение для dany994 Посмотреть профиль Найти все сообщения от dany994
 
Регистрация: 21.12.2015
Сообщений: 23

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


Только в вашем коде, не хочу добавлять отдельный класс к data-id для этого
Ответить с цитированием
  #8 (permalink)  
Старый 13.03.2021, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

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>

Последний раз редактировалось рони, 13.03.2021 в 17:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
С каким уровнем знаний Angular 4(2) можно искать работу? yinfo Работа 1 25.04.2017 08:25
Получить содержимое файла и искать в нём контент по селекторам jquery raja Общие вопросы Javascript 2 22.09.2016 17:40
Нужен код который будет искать совпадения на странице и потом пролистывать до нужной nomerochek Javascript под браузер 1 08.09.2016 10:33
Как искать в DOM по xPath? livelover Events/DOM/Window 5 29.06.2016 16:37
Подскажите как заставить искать getElementById в любом регистре ? pods Events/DOM/Window 17 03.03.2012 03:01