Question

大家好，所以我想使用jQuery显示和隐藏按钮，但仅限于变量为例如。

前：

var st1wch1 = false;

 $(document).ready(function(){
    $("#choice1").click(function(){
        var st1wch1 = true
        state1_1warrior()
    });
});

$(document).ready(function(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
         $("button#choice1").hide()   
    }
 })

但由于某种原因它永远不会隐藏，任何想法???在此先感谢。

Answer 1

最简单的方法可能是：

$(document).ready(function(){
    $("#choice1").click(function(){
       $("button#choice1").toggle()
    });
});

Answer 2

您实现的用于显示或隐藏元素的逻辑是在文档就绪事件中定义的，该事件在用户有机会单击按钮并引发切换全局变量的事件处理程序之前引发。

Answer 3

您可能想隐藏并显示单击元素的时间？

$("#choice1").click(function(){
    $(this).toggle();
});

Answer 4

更改变量后，您的代码不会通过if else条件。将该显示和隐藏条件放在如下所示的函数中

function toggleButton(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
        $("button#choice1").hide()   
    }
}

然后每次更改变量的值时调用此函数。

Answer 5

您必须将代码放在点击处理程序中。我想你以后想要添加至少2个按钮，你想要只切换它们的一部分或类似的东西。

var st1wch1 = false;


 $(document).ready(function(){
    $("#choice1").click(function(){
       if(st1wch1 == false){
         st1wch1 = true;
        $("button#choice1").show()
      }
      else if(st1wch1 == true){
       st1wch1 = false;
       $("button#choice1").hide()   
     } 
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>

Answer 6

您可以使用切换：

registerNavigationRoute()

旁注：不要使用

之类的东西

var st1wch1 = true;
$('#choice1').toggle(condition);

执行：

if (st1wch1 === true)

和（对于== false / === false的情况）：

if (st1wch1)

Answer 7

document.ready（）仅在页面最初加载时调用，因此它会在您加载页面时评估if / else语句，然后再从不评估。单击该元素不会重新运行if else语句。

要获得您想要的行为，您可以

$("#choice1").click(function(){
    $(this).toggle();
});

或

$("#choice1").click(function(){
   evaluateBoolean();
});

function evaluateBoolean(){
    if(st1wch1 == false){
        $("button#choice1").show()
    }
    else if(st1wch1 == true){
          $("button#choice1").hide()   
    }
}

Answer 8

您可以使用toggleClass。

$（'＃button'）。toggleClass（'hidden'，condition）;

使用display：none;

创建css类

如何使用if来显示和隐藏jQuery中的某些内容

8 个答案: