如何让变量和Increment复位？

Question

    var fredclicknumber=0;
$(".fredinbed").click(function(){
    if(fredclicknumber==0) {
        $(".fredtext").addClass("txtbxin")
        $(".fredtext").removeClass("txtbxout")
    }
    else if (fredclicknumber==1){
        $(".fredtext").addClass("txtbxout")
        $(".fredtext").removeClass("txtbxin")
    }
    ++fredclicknumber;//

})
if(fredclicknumber > 1){
    fredclicknumber=0;
}

我试图创建一个文本框，如果你点击项目，它就会出现，当再次点击时就会消失，然而，在所显示的代码中，它只经历了这个过程一次，我想做的是以某种方式循环这段代码，这样你就可以使文本框出现和消失任何次数。

Answer 1

由于你只是在类之间切换，你可以使用 拨动类 而不是创建一个变量

$(".fredinbed").click(function() {
  $(".fredtext").toggleClass("txtbxout")
})

.txtbxin {
  color: green
}

.txtbxout {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='fredinbed'>Toggle</button>
<span class='fredtext txtbxin'>Toggle class </span>

Answer 2

你可以使用toggleClass jQuery funtion来代替检查和改变变量值。

$(".fredinbed").click(function(){
     $(".fredtext").toggleClass("txtbxin");
     $(".fredtext").toggleClass("txtbxout");
});

所以，如果类已经分配给元素，那么toggleClass会删除它，否则会添加类。

Answer 3

使用.toggleClass('is-show')

https:/api.jquery.comtoggleclass。

它看起来像这样

$(".fredinbed").click(function(){
  $(".fredtext").addClass("is-show")
})