#javascript #jquery #events #onclick
Вопрос:
Используйте предложение «для», я хочу открыть список, нажав на кнопку.
Работает только нажатая кнопка, остальное-нет.
это плохо решает проблему.
<body>
<div>
<ul>
<li><button class="test_button"> button1 </button></li>
<li><button class="test_button"> button2 </button></li>
<li><button class="test_button"> button3 </button></li>
<li><button class="test_button"> button4 </button></li>
</ul>
</div>
<div>
<ol>
<li class="test_list">list1<li>
<li class="test_list">list2<li>
<li class="test_list">list3<li>
<li class="test_list">list3<li>
</ol>
<div>
</body>
<script>
let i;
let btn = document.getElementsByClassName(page_faq_tab_button);
let agl = document.getElementsByClassName(accordion_group_list);
btn.addEventListener("click", btnFunction);
function btnFunction() {
for (i = 0; i < btn.length; i ) {
btn[i].style.color = "#AAAA";
agl[i].style.display = "block";
}
}
</script>
Комментарии:
1. Пожалуйста, будьте более конкретны. Это значит, что вы хотите отображать списки один за другим, используя цикл » для » при нажатии кнопки?
2. да всего 1 список
3. Вам нужно использовать цикл for? Есть более простые способы…
4. Попробуйте привести в порядок код и привести минимальный пример.
Ответ №1:
function showList() {
var myArray = jQuery.makeArray($('.test_button'));
for(var i = 0; i < myArray.length; i ) {
myArray[i].style.display = "block";
}
}
// The following is just to hide your buttons first:
$(function() {
$('.test_button').hide();
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li><button class="test_button"> button1 </button></li>
<li><button class="test_button"> button2 </button></li>
<li><button class="test_button"> button3 </button></li>
<li><button class="test_button"> button4 </button></li>
</ul>
</div>
<button onclick="showList()">Show list</button> Пожалуйста, обратите внимание, однако, что есть гораздо лучшие способы сделать это:
Использование forEach
function showList() {
var myArray = jQuery.makeArray($('.test_button'));
myArray.forEach(function(item, index, arr) {
arr[index].style.display = "block";
});
}
Самый простой способ
function showList() {
$('.test_button').show();
}