実現したいこと
JavascriptとLaravelを使用して
ボタンを押したら入力欄が開くようにしたいです。
ただし、foreachで繰り返されているボタンを押したらその1つだけが入力欄が追加されてほしいです。
下に記述してあるソースコードで言いますと
前提
Laravel8
発生している問題・エラーメッセージ
ブラウザのコンソール画面にエラーも出ず
クリックしても何も起きない。
該当のソースコード
Laravelのindex.blade.php(簡略化してます。)
head内
<script src="{{ asset('/js/button.js') }}"></script>body内
@foreach($tests as $test)
<div class="justify-end">
<button class="button">入力</button>
</div>
<div class="wrap">
<form action="{{ route('test')}}" method="post">
@csrf
<p>コメント</p>
<textarea name="comment"></textarea>
<div class="justify-end">
<button type="submit" >送信</button>
</div>
</form>
</div>
</div>
@endforeach
javascript内
$(function () {
var button = document.getElementsByClassName('button');
for (i = 0; i < button.length; i++) {
button[i].addEventListener("click", function () {
$(this).toggleClass('display');
});
}
});
試したこと
javascriptで
$(function() {
$(".button").click(function() {
$(".wrap").toggleClass("display");
});
});
と記述すると入力画面が出てきますが
class="wrap"全てに付与してしまうため
foreachで繰り返されているボタンどれをクリックしても全部に入力欄が増えてしまいます。
また
$(function () {
var button = document.getElementsByClassName('button');
for (i = 0; i < button.length; i++) {
button[i].addEventListener("click", function () {
$(this).next().toggleClass('display');
});
}
});
最後の$(this)ではbuttonがあるクラスに付与してしまっているのでは?と思い
next()にしてみましたが何も変わらず。。。
なぜエラーすら出ず実行されないのでしょうか??
教えていただけますと幸いです。
よろしくお願いいたします。
回答1件