Событие нажатия нескольких кнопок
Работаю на сайте с несколькими кнопками, все что я хочу, это чтобы кнопки при нажатии на них меняли цвет. Пример. Нажмите кнопку 1, и цвет кнопки 1 изменится с белого на желтый. Нажмите на кнопку 2, и цвет кнопки 2 изменится с белого на желтый. Прямо сейчас у меня есть onclick в коде кнопки, и он работает, за исключением того, что он меняет все кнопки сразу.
$(document).ready(function() {
$(".button").click(function() {
$(".button").css('background', 'yellow');
});
});.button {
background-color: #FFFFFF;
/* White */
border: 2px solid #f44336;
color: black;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
border-radius: 50%;
width: 60px;
text-align: center;
cursor: pointer
}
.disabled {
background-color: #FF0000;
/* Red */
color: white;
cursor: not-allowed;
}
.button-clicked {
background-color: #FFFF00;
/* Yellow */
}
td:not(:first-child) {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}<script src = "Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width = "100%" border=1>
<tr>
<td align = "center"><button class = "button" id = "1" onclick = "myFunction()">1</button></td>
<td align = "center"><button class = "button" id = "2" onclick = "myFunction()">2</button></td>
<td align = "center"><button class = "button" id = "3" onclick = "myFunction()">3</button></td>
</tr>
</table>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
89
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Пытаться
function myFunction(event) {
event.target.style = "background: yellow";
}<button class = "button" id = "1" onclick = "myFunction(event)">1</button>
<button class = "button" id = "2" onclick = "myFunction(event)">2</button>
<button class = "button" id = "3" onclick = "myFunction(event)">3</button>Или это (что немного лучше, потому что мы не используем обработчик onclick (подробнее здесь))
function myFunction(event) {
event.target.style = "background: yellow";
}
[...document.querySelectorAll('button')].map(x=>x.addEventListener('click',myFunction));<button class = "button" id = "1">1</button>
<button class = "button" id = "2">2</button>
<button class = "button" id = "3">3</button>добавлен код, который я использую. Я изменил идентификатор на всех кнопках.
—
11.02.2019 20:06
Ответ принят как подходящий
Вот решение с использованием предоставленного вами кода, вам просто нужно изменить $(".button").css('background', 'yellow'); на $(this).css('background', 'yellow');
Вы также можете удалить onclick из своего HTML.
Хотя это рабочий фрагмент с вашим кодом, другие предоставили лучшие решения этой проблемы.
<!DOCTYPE html>
<html>
<head>
<script src = "Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".button").click(function () {
$(this).css('background', 'yellow');
});
});
</script>
<style>
.button {
background-color: #FFFFFF;
/* White */
border: 2px solid #f44336;
color: black;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
border-radius: 50%;
width: 60px;
text-align: center;
cursor: pointer
}
.disabled {
background-color: #FF0000;
/* Red */
color: white;
cursor: not-allowed;
}
.button-clicked {
background-color: #FFFF00;
/* Yellow */
}
td:not(:first-child) {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<table width = "100%" border=1>
<tr>
<td align = "center"><button class = "button" id = "1">1</button></td>
<td align = "center"><button class = "button" id = "2">2</button></td>
<td align = "center"><button class = "button" id = "3">3</button></td>
</body>
</html>Есть ли способ добавить текстовые данные в поле таблицы? В порядке нажатия. Кто-то нажимает кнопку 3, информация об идентификаторе из кнопки 3 переходит в другое поле данных.
Другие вопросы по теме
Использование темы CSS/JS/jQuery с Vue.js
Получить выбранное значение из метки/таблицы данных
Получите возврат из JQuery в переменную PHP в простой HTML-форме PHP
Как затухать элементы, когда они достигают контейнеров scrollTop в JQuery?
Как получить текст JSON в HTML?
Проблема: событие OnChange не срабатывает для ввода, если один и тот же файл выбран дважды
Jquery Получить текст вложенного селектора, а не дочерний
Используя результат файла, выбранного пользователем внутри скрипта
Как отображать записи в другом представлении с фильтром даты в asp.net mvc
Функции JQuery hide() и show() перекрывают друг друга
Похожие вопросы
У меня есть плоское состояние массивов в реакции, и я хочу сделать его вложенным массивом и переместить его в состояние другого объекта
Реагировать: отображать только при наличии реквизита
Получил исключение TypeError: window.parent.leftframe.document.viewForm не является функцией
Загрузка php через функцию AJAX
Как определить, выполняется ли мой код как пакет Webpack
Создать объект javascript с изображением в качестве свойства
Использование темы CSS/JS/jQuery с Vue.js
Я хочу закрыть изображение, моя кнопка закрытия не работает, я не хочу, чтобы вся страница закрывалась только изображением
Обнаружение выброса в массиве строк — VanillaJS и parseInt
Как добавить событие onclick для запуска таймера
Покажите нам код. Отредактируйте свой вопрос, нажмите кнопку
<>или нажмите Ctrl+M и создайте рабочий пример проблемы. Похоже, ваша логика щелчка ищет все кнопки для изменения, а не использует элемент в событии, чтобы узнать, какую из них изменить.