Как сделать так, чтобы моя функция срабатывала для конкретного элемента, на который был произведен клик? А то, сейчас она срабатывает вообще для всех элементов, на который я бы ни кликнул
Привет, ErgoProxy1637! Чтобы сделать функцию срабатывающей только для конкретного элемента, на который был произведен клик, тебе нужно использовать делегирование событий. Вот пример кода на JavaScript, который позволит тебе сделать это: document.addEventListener('click', function(event) { if (event.target.matches('.your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента } }); JavaScript document.addEventListener('click', function(event) { if (event.target.matches('.your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента } }); Замени ".your-element-class" на класс твоего конкретного элемента, для которого ты хочешь, чтобы функция срабатывала. Таким образом, функция будет срабатывать только при клике на элемент с этим классом, и не будет срабатывать для других элементов на странице. Надеюсь, это поможет! Если у тебя возникнут еще вопросы, не стесняйся спрашивать.
ErgoProxy1637, Прошу прощения за путаницу. Давай попробуем другой подход. Вот пример, как можно использовать делегирование событий для обработки клика на конкретном элементе: document.addEventListener('click', function(event) { if (event.target.classList.contains('your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента } }); JavaScript document.addEventListener('click', function(event) { if (event.target.classList.contains('your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента } }); Замени "your-element-class" на класс твоего конкретного элемента. Этот код должен сработать правильно и обрабатывать клик только на нужном элементе. Попробуй этот вариант и дай мне знать, помог ли он. Если у тебя есть другие вопросы, не стесняйся спрашивать.
ErgoProxy1637, конечно, вот более подробное объяснение: document.addEventListener('click', function(event) { if (event.target.classList.contains('your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента // Например: event.target.style.color = 'red'; // изменение цвета текста // или alert('Вы кликнули на нужный элемент!'); // показать сообщение } }); JavaScript document.addEventListener('click', function(event) { if (event.target.classList.contains('your-element-class')) { // Здесь выполняйте вашу функцию для конкретного элемента // Например: event.target.style.color = 'red'; // изменение цвета текста // или alert('Вы кликнули на нужный элемент!'); // показать сообщение } }); В этом коде мы используем метод `classList.contains` для проверки, содержит ли целевой элемент класс "your-element-class". Если да, то выполняется нужная функция для этого элемента. Надеюсь, это поможет! Если у тебя остались вопросы, не стесняйся спрашивать.
dontreg, Так, конечно сделать можно, но в работе такой подход совершенно не приветствуется, потому как будет больше элементов, с которому в будущем придется работать беку, да и нагрузка на браузер будет больше, а читаемость кода, значительно хуже. А так можно было просто для каждого элемента придумать отдельную функцию, что было бы еще проще, но и так делать нельзя(
Почему не используешь classList.toggle? По идее можно будет убрать все твои проверки и сделать функцию проще. Где или как ты эту функцию вызываешь? Обычно пишут функцию, а затем кидают её в eventListener к нужным элементам, при клике на которые эта функция должна отработать
0w0, Ну toggle, тоже можно использовать, но сути это не изменит (хотя и про него мне сказали типо "нельзя пользоваться", что насчет того как использовать функцию, блин, ты прав, но мне лишь в карце показали как работать с addEventListener и по факту я ею пользоваться не могу, хотя конкретно тут она бы куда лучше подошла чем oncklick, хз зачем, но препод сказал, что предпочтительнее для работы использовать именно oncklick, хотя вроде помню, он говорил, что onclcik, лучше для бека (хз почему под них вся работа подстроена)
ErgoProxy1637, я слепой, сорян, не увидел onclick. Можешь в тг отписать, поковыряю твой код с твоими "особенностями"
Ну так при событии тебе в фунцию приходит евент, в котором есть таргет который содержит ссылку на элемент на котором произошло событие
<div class='item'> Trigger </div> <ul class="list" data-active="false"> <li>Item1</li> <li>Item2</li> </ul> <div class='item'> Trigger </div> <ul class="list" data-active="false"> <li>Item1</li> <li>Item2</li> </ul> HTML <div class='item'> Trigger </div> <ul class="list" data-active="false"> <li>Item1</li> <li>Item2</li> </ul> <div class='item'> Trigger </div> <ul class="list" data-active="false"> <li>Item1</li> <li>Item2</li> </ul> <style> .list[data-active='false'] { display: none; } </style> CSS <style> .list[data-active='false'] { display: none; } </style> const items = document.querySelectorAll('.item') const lists = document.querySelectorAll('.list') items.forEach((item, index) => { item.addEventListener('click', () => { const isListActive = lists[index].dataset.active if (isListActive === 'true') { lists[index].dataset.active = 'false' return } lists[index].dataset.active = 'true' }) }) JS const items = document.querySelectorAll('.item') const lists = document.querySelectorAll('.list') items.forEach((item, index) => { item.addEventListener('click', () => { const isListActive = lists[index].dataset.active if (isListActive === 'true') { lists[index].dataset.active = 'false' return } lists[index].dataset.active = 'true' }) })
Все гораздо проще чем тут писали. У тебя сейчас для каждого элемента с классом прописан обработчик события (атрибут onclick). Оставь его только на том элементе, который нужен, а у остальных убери. Если проще, то оставь onclick="showList(this)" только на том элементе, на котором нужно обрабатывать клик
assholebass, блин чел, конечно круто сказал, но прикол в том, что обработчик нужен для всех элементов
ErgoProxy1637, тогда вопрос непонятен - сначала пишешь, что надо чтоб срабатывал при клике на один элемент, потом что обработчик нужен для всех элементов. Давай поподробнее
assholebass, капец, тут же все ясно. Смотри ты кликнул на один элемент, он сработал, потом ты кликнул на другой элемент, он тоже сработал, кликнул на третий и он сработал. Вот так нужно, чтобы работало, а не так, чтобы чисто один элемент конкретный работал при клики или сразу все кликинув на один из них. Хз как это еще объяснить
var elements = document.querySelectorAll('.class'); elements.forEach(function(element) { element.addEventListener('click', function() { console.log("элемент: " + element.textContent); }); }); JS var elements = document.querySelectorAll('.class'); elements.forEach(function(element) { element.addEventListener('click', function() { console.log("элемент: " + element.textContent); }); });
0xMax, красиво получилось, но тебя опередили, один пользователь из темы уже скинул решение, кстати точно такое же. Но все равно спасибо