Как отключить разделители, которые не выбраны в массиве? Javascript в Shopify

#javascript #for-loop #shopify #toggle #liquid

Вопрос:

таким образом, мой текущий код работает в навигаторе, позволяя этой кнопке, которая зацикливается с соответствующим индексом, включать и выключать каждый div. Я не хочу, чтобы эти дивы переключались, я хочу, чтобы отображался только соответствующий div, а все остальные отображались: нет. Пожалуйста, посоветуйте

Спасибо!

 function showDiv(index) { let one = document.getElementById('shopify-section-track_order_details'); let two = document.getElementById('shopify-section-returns_exchanges_details'); let three = document.getElementById('shopify-section-contact_us_details'); let four = document.getElementById('shopify-section-order_status_details'); let five = document.getElementById('shopify-section-shipping_returns_details'); let six = document.getElementById('shopify-section-corporate_details'); let seven = document.getElementById('shopify-section-product_help_details'); let eight = document.getElementById('shopify-section-ambassador_details'); let nine = document.getElementById('shopify-section-FAQ_details');  let arrHelp = [one, two, three, four, five, six, seven, eight, nine];  let el = arrHelp[index - 1];  if (el.style.display != "block") {  el.style.display = "block";  } else {  el.style.display = "none";  } }   

ссылка находится в Shopify liquid, вызывающей функцию типа:

 {% for block in section.blocks %}   lt;a id="pageLink" onclick="showDiv({{ forloop.index }})" gt;  {{ block.settings.button }}  lt;i id="navArrow{{ forloop.index }}" class="fad fa-chevron-right navArrow" style="float: right"gt;lt;/igt;  lt;/agt; {% endfor %}  

Ответ №1:

 function toggleDiv(index) {  const $target = document.querySelectorAll('[id*=shopify-section-]')[index];  $target.classList.toggle('hide'); }  toggleDiv(1); 
 .hide {  display:none; }  #test {  display: flex; }  #test gt; div {  padding: 15px;  background-color: #323232;  color: #e2e2e2;  margin: 2px; } 
 lt;div id="test"gt;  lt;div id="shopify-section-1"gt;1lt;/divgt;  lt;div id="shopify-section-2"gt;2lt;/divgt;  lt;div id="shopify-section-3"gt;3lt;/divgt;  lt;div id="shopify-section-4"gt;4lt;/divgt;  lt;div id="shopify-section-5"gt;5lt;/divgt;  lt;div id="shopify-section-6"gt;6lt;/divgt;  lt;div id="shopify-section-7"gt;7lt;/divgt;  lt;div id="shopify-section-8"gt;8lt;/divgt;  lt;div id="shopify-section-9"gt;9lt;/divgt;  lt;div id="shopify-section-10"gt;10lt;/divgt; lt;/divgt;