カウンタをインクリメントしてJqueryでデクリメントする方法

Question

こんにちは私はユーザーのために1つの値だけ変数をインクリメントするのに援助が必要です。そして、ユーザーが同じボタンをクリックすると値が1つ減少し、このサイクルが続きます。そこ以下のコードでは似たような状況です：

$(function() { 
 
    var indicator = 0; 
 
    $('#btn1').on('click', function() { 
 
    $('#toggleIndicator').show(); 
 
    indicator++; 
 
    alert('ON value : ' + indicator); 
 
    }) 
 

 
    $('#btn2').on('click', function() { 
 
    $('#toggleIndicator').hide(); 
 
    indicator--; 
 
    alert('OFF value : ' + indicator); 
 
    }) 
 
});

div { 
 
    width: 100px; 
 
    height: 20px; 
 
    margin-bottom: 10px; 
 
} 
 
.a { 
 
    background-color: orange; 
 
} 
 
.b { 
 
    background-color: gold; 
 
} 
 
.c { 
 
    background-color: maroon; 
 
} 
 
.d { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a" id="toggleIndicator"> 
 
</div> 
 

 
<input type="button" id="btn1" value="ON" /> 
 
<input type="button" id="btn2" value="OFF" />

はなく、私の場合、私はアクションだけでオンまたはオフのように一つのボタンになりたいです。これを行う方法はどうですか？

Answer 1

HTML：

<button id="btn">Click</button> 

のjQuery：

$(document).ready(function) { 
    var state = true; 
    var indicator = 0; 

    $("#btn").click(function() { 
    if(state) { 
    indicator++; 
    alert(indicator); 
    state = false; 
    } else { 
    indicator--; 
    alert(indicator); 
    state = true; 
    } 
}); 
}); 

はここでフィドルです：あなたは何かを自分で書くことhttps://jsfiddle.net/qjm9dz2g/2/