#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;