ブログ上でのjQueryの動き

こんばんは。

テンプレートでjQueryのCDNを追加して動作確認をしました。

$(this)が思ったように使えなかったので記録しておきます。

CDNは以下のものを使用しました。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

サンプルのHTMLです。

問題をクリックする度に解答が表示・非表示を繰り返すものです。

  

    
問題
    
解答
  

最初は簡略化させようと思い以下のようにやりました。

<script type="text/javascript">
	$(function(){
	  $(".question").on("click", () => {
		  $(this).siblings(".answer").toggle();
    });
  });
</script>

駄目なバージョン(注：scriptの関係上class名は変えています)

• 問題
  解答

これではなぜか動作しませんでした。$(this)に問題あるのかと思い、同じ用に$(".question")とすると動いたんですが、複数ある場合は当然ながら同じclass属性も同じ動作になっていしまいます。ものは試しにfunction()を使ってやったところ動作しました。

<script type="text/javascript">
	$(function(){
	  $(".question").on("click", function() {
		  $(this).siblings(".answer").toggle();
    });
  });
</script>

うまくいったバージョン

• 問題
  解答

なぜかは不明。