クリックするたびにイベントが起こるようにしたいです

Question

前提・実現したいこと

ボタンを押すたびに文字と文字の色が変わるようにしたいのですが発火しません。
cssファイルとscriptファイルを作らずに実装したいです。

該当のソースコード

　　　　　　　　<div>
		<button class="color-change-button">黒色</button>
	</div>

	<script>
		
    $('.color-change-button').click(function(){
      $(this).toggle(
        function(){
          $(this).html('赤色').css('color', 'red');
        },
        function(){
          $(this).html('緑色').css('color','green');
        },
        function(){
          $(this).html('青色').css('color', 'blue');
        }
      );
    });
	</script>

試したこと

html()とcss()のどちらかが原因なのかと片方づつ消してみましたが、どちらも発火しませんでした。

Answer 1

まず、提示しているソースはどこかを参考にしたんですか？
toggle は表示非表示を操作するものなので、ご希望の動きはできないと思います。
jQuery日本語リファレンス

やりたかったら、色の組み合わせを配列に入れて、クリックごとにインデックスを加算して、表示するテキストとCSSを出力する方法がいいのかなと思います。

こんな感じ。
サンプル

Comments

[morfonica]

ありがとうございます！

[morfonica]

ちなみになのですが、
カウンタ変数nが３になる時はどのような時でしょうか。

[int32_t]

toggle(関数, 関数, 関数, ...) は廃止されて、jQuery 1.9 以降は使えません。
https://api.jquery.com/toggle-event/#toggle-handler-handler-handler

[mksk]

3というのは配列の要素数です。
クリックのたびにnを1ずつ加算していくと、配列の要素数を上回ってしまい、配列のインデックスが見つからなくなってしまいます。
なので、nが配列の個数に到達したら0に戻してやるということをしています。
実際に使うなら、3ではなくcolors.lengthとかにしたほうがいいでしょうね。