Question

您好，我正在shopify网站上工作。这是一个基于步骤的购物车功能，第二步后可以隐藏并显示作品。这里的事情是我试图基于按钮单击来隐藏并显示一个div，所以如果我选择一次隐藏一个div的按钮，如果我两次选择一个按钮则隐藏另一个div，但是它不会颠倒顺序。这意味着，如果我取消选择该按钮，它不会显示div，它将保持隐藏状态

请帮助我我的网站网址：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

我看到这样的问题可以通过两种方法解决。您可以根据点击将变量设置为true或false。因此就像var firstHidden = false。然后myFunction执行firstHidden =！firstHidden。另一种方法是使用模数运算符％。如果单击％2 == 0，则没有余数，并以一种方式切换两者。否则，将两者都切换。

Answer 2

使用一个类为div定位，如果您不能以这种方式隔离它，则可能需要使用nth-child伪。我相信Shopify使用jQuery，但是可以使用香草js完成一些代码，而无需重写。

这是我的解决方案，该按钮可以正常工作并切换div的不透明度；不显示任何内容表示将其从dom中移除，因此我不选择这样做，而是希望保持相同的间距。

切换一个类以控制元素的可见性。

$(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>

我正在尝试隐藏和显示基于按钮点击的div

2 个答案: