Я пытаюсь скрыть и показать div на основе нажатия кнопки

Question

Привет, я работаю над сайтом shopify. Это функциональность корзины шагов, а после второго шага скрываю и показываю работы. Здесь я пытаюсь скрыть и показать div на основе нажатия кнопки, поэтому, если я выбираюкнопка один раз, когда она скрывает элемент div, и если я выбираю кнопку два раза, она скрывает другой элемент div, но это не меняет порядок. Это означает, что если я отменил выбор кнопки, то она не отображает элемент div, она остается скрытой

Пожалуйста, помогите мне с этим URL моего сайта: https://abmw6w36umi6wmd9 -8342896758.shopifypreview.com /

Вот мой код

 <script>
var clicks = 0;

function myFunction() {
  clicks = clicks+1;
  if(clicks == 1){
    document.getElementById('twoo-step').style.display = 'block'; 
    document.getElementById('ist-step').style.display = 'none'; 
  }

}
    
    
  </script>

    <script>
   jQuery(document).ready(function () {
    var count = 0;
    jQuery(".select_btn_two").click(function () {
        if (count >= 1) {
            jQuery("#twoo-step").hide();
        } else count++

    });

}); 
    
    
  </script> 

Answer 1

Задайте div с классом, и если вы не можете изолировать его таким образом, вам может понадобиться использовать псевдо-nth-child.Shopify использует jQuery, я полагаю, но этот код можно сделать с помощью vanilla js с небольшим переписыванием.

Вот мое решение, кнопка работает и переключает непрозрачность div;не отображать означает, что он удален из домена, поэтому я не выбрал это, хочу сохранить интервал таким же.

Переключите класс для управления видимостью элемента.

$(document).ready(function(){

$(".clickMe").click(function(){
  $(".hideDiv").toggleClass("hide");
});

});

.hide {
opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>Don't ever hide me</div>
<div class="hideDiv">Hide and show this</div>
<button class="clickMe">Click me</button>

Answer 2

Я видел подобные проблемы, решаемые двумя способами.Вы можете установить переменную в true или false в зависимости от клика.Так как var firstHidden = false.Тогда myFunction делает firstHidden =! FirstHidden.Другой способ - использовать оператор модуля%.Если щелкнуть% 2 == 0, остатка нет, и переключение в одну сторону.Иначе переключите оба в другую сторону.