Позвольте Javascript проверить, какая кнопка была нажата, и изменить с ее помощью определенные детали HTML
на моем веб-сайте у меня есть несколько кнопок, которые открывают или закрывают определенные детали HTML.
Мои кнопки (у меня есть намного больше):
<button onClick = "showdetail()" class = "stage-detail">1</button>
<button onClick = "showdetail()" class = "stage-detail">2</button>
Мои данные (еще несколько):
<details id = "brock1"></details>
<details id = "brock2"></details>
Теперь я хочу написать Javascript, который определяет, какая кнопка была нажата, и затем открывает или закрывает нужные детали.
Например:
Если была нажата кнопка button1: детали brock1 должны быть открыты, а детали brock2 закрыты.
С button2 прямая противоположность.
Я начал так:
var i;
var detail = document.getElementsByClassName("stage-detail");
for (i = 0; i < detail.length; i++){
detail[i].addEventListener("click", function(){
}
}
и вот вот застрял ..
Я имею в виду, что я мог бы написать отдельные функции для каждой кнопки, но для меня это звучит глупо, потому что они будут делать почти то же самое.
Кто-нибудь может мне помочь?
Да, Holydragon открыл 1, но обе кнопки открывались одинаково.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Как насчет того, чтобы showdetail() принимал 1 вход, который определяет нажатую кнопку?
И используйте это вот так.
<button onClick = "showdetail(1)" class = "stage-detail">1</button>
<button onClick = "showdetail(2)" class = "stage-detail">2</button>
Теперь в вашей функции вы точно знаете, какая кнопка нажата, глядя на ввод. Остальное - отображение и переключение.
Как я могу получить доступ к этим входам?
Ваша функция может выглядеть примерно так: var showdetail = function (buttonId) {console.info (buttonId); }
Сделать можно так:
<button onClick = "showdetail('brock1')" class = "stage-detail">1</button>
<button onClick = "showdetail('brock2')" class = "stage-detail">2</button>
<details id = "brock1"></details>
<details id = "brock2"></details>
.
<script>
function showdetail(id){
let the_selected_element = document.getElementById(id);
//do something with the selected element
alert(the_selected_element.innerHTML);
}
</script>
ты можешь попробовать это:
<button onClick = "showdetail(1)" class = "stage-detail">1</button>
<button onClick = "showdetail(2)" class = "stage-detail">2</button>
<script>
function showdetail(btnnumber){
console.info('you pressed the button: ' + btnnumber);
}
</script>
Могу ли я использовать btnnumber в if (btnumber = 1)?
@DieneMutter Ты хоть представляешь, как на самом деле открыть <details>? Смотрите мой отвечать.
Используйте неограниченное количество <button>s до равного количества <details>
Делегирование событий
Обработайте неограниченное количество<button>s с помощью одиночный EventListener:
Если вокруг
<button>sнет ярлыка, сделайте это так. (section.buttons).Зарегистрируйте событие
clickв родительском теге<button>s(section.buttons).Попросите функцию обратного вызова (
toggleDetails()) использовать свойствоevent.target(щелкнувший<button>), чтобы определить, какой из<button>был выбран, сравнив его сevent.currentTarget(тег, зарегистрированный для события щелчка -section.buttons).
[open] Атрибут<details open>
<details> имеют атрибут под названием [open], который, когда true (или просто там) - <details> открыт, а когда false (или просто нет), <details> закрыт.
"How can I use something different than the textContent for the num variable?"
<button>s можно собрать, а затем проиндексировать, см. Обновленный Демо 2.
Демо 1
Подробности комментируются в демо.
// Reference the parent tag of <button>s
var btns = document.querySelector('.buttons');
// Register parent tag of <button>s to the click event
btns.addEventListener('click', toggleDetails);
// Callback function passes Event Object (e)
function toggleDetails(e) {
// Reference clicked tag (ie <button>)
var tgt = e.target;
/*
if clicked tag is NOT the registered tag (ie section.buttons)...
...get the text of clicked <button> (ie a number)...
...then reference the tag with the #id of "brock"+a number which
will end up to be a <details> tag.
if this <details> tag has an [open] attribute...
...remove it...
otherwise...
...add it and set it to true.
*/
if (tgt !== e.currentTarget) {
var num = tgt.textContent;
var dtl = document.getElementById('brock' + num);
if (dtl.getAttribute('open')) {
dtl.removeAttribute('open');
} else {
dtl.setAttribute('open', true);
}
}
}<!--Wrap <button>s in a tag-->
<section class='buttons'>
<button class = "stage-detail">1</button>
<button class = "stage-detail">2</button>
<button class = "stage-detail">3</button>
<button class = "stage-detail">4</button>
<button class = "stage-detail">5</button>
<button class = "stage-detail">6</button>
</section>
<details id = "brock1">ONE</details>
<details id = "brock2">TWO</details>
<details id = "brock3">THREE</details>
<details id = "brock4">FOUR</details>
<details id = "brock5">FIVE</details>
<details id = "brock6">SIX</details>Демо 2
// Reference the parent tag of <button>s
var stage = document.querySelector('.stage');
// Register parent tag of <button>s to the click event
stage.addEventListener('click', toggleDetails);
// Callback function passes Event Object (e)
function toggleDetails(e) {
// Reference clicked tag (ie <button>)
var tgt = e.target;
// Collect all <button>s into a NodeList
var btns = document.querySelectorAll('button');
// Declare variable
var num;
/*
On each loop through NodeList...
if there's a clicked <button>...
...assign the index number +1 to previous variable (num).
*/
for (let i = 0; i < btns.length; i++) {
if (btns[i] === tgt) {
num = i + 1;
}
}
/*
if clicked tag is NOT the registered tag (ie section.buttons)...
...then reference the tag with the #id of "brock"+a number which
will end up to be a <details> tag.
if this <details> tag has an [open] attribute...
...remove it...
otherwise...
...add it and set it to true.
*/
if (tgt !== e.currentTarget) {
var dtl = document.getElementById('brock' + num);
if (dtl.getAttribute('open')) {
dtl.removeAttribute('open');
} else {
dtl.setAttribute('open', true);
}
}
}<!--Wrap <button>s in a tag-->
<section class='stage'>
<button class = "stage-detail">1</button>
<button class = "stage-detail">2</button>
<button class = "stage-detail">3</button>
<button class = "stage-detail">4</button>
<button class = "stage-detail">5</button>
<button class = "stage-detail">6</button>
</section>
<details id = "brock1">ONE</details>
<details id = "brock2">TWO</details>
<details id = "brock3">THREE</details>
<details id = "brock4">FOUR</details>
<details id = "brock5">FIVE</details>
<details id = "brock6">SIX</details>Как я могу использовать что-то отличное от textContent для переменной num?
@DieneMutter см. Демо 2
Действительно ли какие-либо ответы (кроме моего своя) открывают и закрывают какие-либо теги
<details>s?