こんばんは。
テンプレートで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>
うまくいったバージョン
なぜかは不明。
おすすめブログ
@goo_blog
