javascript - 如何将 foreach 变量从 Laravel Blade 传递到 JavaScript？

Question

下面的脚本是当按下按钮时，浏览器会说出变量词。 但是，我在 laravel Blade 中使用 @foreach 。 所以只有第一个按钮有效。但是 foreach 生成的其余按钮不起作用。

index.blade.php

@foreach($data as $val)
<h2><a class="word" href="/?keyword={{$val->word}}">{{$val->word}}</a></h2>      
<input id="text" type="hidden" value="{{$val->word}}">
<button id="speak-btn">play</button>
@endforeach

<script>
const text = document.querySelector('#text')
const speakBtn = document.querySelector('#speak-btn')
speakBtn.addEventListener('click', function() {
const uttr = new SpeechSynthesisUtterance(text.value)
speechSynthesis.speak(uttr)
})
</script>

那么我怎样才能让所有按钮都工作呢？我想我需要在 javascript 中使用 this 。但是，我是JS新手，不知道如何正确使用它。谢谢。

Answer 1

您不能为所有按钮使用相同的 ID，您可以使用相同的类并按类查询或调用函数并将文本传递到那里并播放该函数

@foreach($data as $val)
<h2><a class="word" href="/?keyword={{$val->word}}">{{$val->word}}</a></h2>      
<input id="text" type="hidden" value="{{$val->word}}">
<button class="speak-btn" onclick="play('{{$val->word}}')">play</button>
@endforeach

<script>
function play(text) {
  // Change these 2 lines if you need 
  const uttr = new SpeechSynthesisUtterance(text)
  speechSynthesis.speak(uttr)
}
</script>