Как получить переменную и инкремент для сброса?

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

Я пытаюсь создать текстовое поле, которое появится, если вы щелкнете по элементу, и исчезнет при повторном щелчке, однако с указанным кодом он проходит этот процесс только один раз, и я хочу, чтобы я как-то oop этот код, чтобы вы могли заставить текстовое поле появляться и исчезать любое количество раз.

Answer 1

Вы можете использовать функцию toggleClass jQuery вместо проверки и изменения значений переменных.

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

Таким образом, если класс уже назначен элементу, то toggleClass удалит его, в противном случае он добавит класс.

Answer 2

Использовать .toggleClass ('is-show')

https://api.jquery.com/toggleclass/

Это будет выглядеть так

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

Answer 3

Поскольку вы просто переключаетесь между классами, вы можете использовать toggleclass вместо создания переменной

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