如何在 Javascript 的脚本标签中动态访问 JSP 的 forEach 标签值。？

Question

我正在尝试使用 forEach tag.The 从控制器（servlet）获取专辑每首曲目的所有详细信息到 jsp 页面 tag.The 正在获取值 perfectly.For 结合 play/pause按钮和音频标签我写了下面的代码。但是，仅使用此第一首曲目是 played.Even，而播放剩余曲目时第一首歌曲正在播放。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!--  APlayer CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
 <table class="center">
 <tr>
    <th style="text-align: left;">SONG</th>
    <th>TITLE</th>
    <th>ARTIST</th>
   <th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
  </tr>
  <tr></tr>
  <tr></tr>
 
<c:forEach  items="${tracklist}" var="track" >
  <tr>
  <td>

  <audio  id="sound${track.track_no}">
    <source src="./TrackRetrieve?track_no=${track.track_no}" type="audio/mpeg">
  </audio>
  <h2>Sound ${track.track_no}</h2>
<div class="play" id="btn${track.track_no}">play</div>

  </td>
  <td>${track.track_name}</td>
  <td>${track.track_performer}</td>
  <td>${track.track_duration}</td>
  <td></td>
  </tr>
  
</c:forEach> 

</table>

<script>

 $('.play').click(function(){
    var $this = $(this);
    let id = $this.attr('id');
   id = id.split("btn")[1];
    
    $this.toggleClass('active');
    if($this.hasClass('active')){
        $this.text('pause'); 
        $('audio[id^="sound"]')[id-1].play();        
    } else {
        $this.text('play');
        $('audio[id^="sound"]')[id-1].pause();
    }
}); 
 </script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <!--  APlayer JQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    
</body>
</html>

能否建议在脚本标记中访问 jsp 中的值的方法...？

Answer 1

当你点击你的播放按钮时，你会得到 id 即：${track.track_no} 你可以使用它来播放所需的音频文件。因为在你当前的代码中你有 <audio id="sound${track.track_no}"> 所以只需在选择器中使用它播放所需的音频。

演示代码 :

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!--  APlayer CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <table class="center">
    <tr>
      <th style="text-align: left;">SONG</th>
      <th>TITLE</th>
      <th>ARTIST</th>
      <th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
    </tr>
    <tr></tr>
    <tr></tr>

    <tr>
      <td>

        <audio id="sound1">
    <source src="http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3" type="audio/mpeg">
  </audio>
        <h2>Sound ${track.track_no}</h2>
        <div class="play" id="btn1">play</div>

      </td>
      <td>${track.track_name}</td>
      <td>${track.track_performer}</td>
      <td>${track.track_duration}</td>
      <td></td>
    </tr>
    <tr>
      <td>

        <audio id="sound2">
    <source src="http://www.soundjay.com/button/beep-07.wav" type="audio/mpeg">
  </audio>
        <h2>Sound ${track.track_no}</h2>
        <div class="play" id="btn2">play</div>

      </td>
      <td>${track.track_name}</td>
      <td>${track.track_performer}</td>
      <td>${track.track_duration}</td>
      <td></td>
    </tr>

  </table>

  <script>
    $('.play').click(function() {
      var $this = $(this);
      let id = $this.attr('id');
      id = id.split("btn")[1];
      console.log(id)
      console.log("sound" + id);
      $this.toggleClass('active');
      if ($this.hasClass('active')) {
        $this.text('pause');
        //play audio of given id
        $("audio[id=sound" + id + "]")[0].play();
      } else {
        $this.text('play');
        //pause audio of given id
        $("audio[id=sound" + id + "]")[0].pause();
      }
    });
  </script>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <!--  APlayer JQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


</body>

</html>

Answer 2

$('.play').click(function(){
    var $this = $(this);
    let id = $this.attr('id');
   id = id.split("btn")[1];
    
    $this.toggleClass('active');
    if($this.hasClass('active')){
        $this.text('pause'); 
        $('audio[id^="sound"]')[id-1].play();        
    } else {
        $this.text('play');
        $('audio[id^="sound"]')[id-1].pause();
    }
});

在此脚本中，您正在访问不存在的音频值，而且您应该将音频文件动态推送到列表，然后访问它们

使用下面的计数迭代 foreach 循环并在音频标签中设置该计数

<c:set var="count" value="0" scope="page" />

<c:set var="count" value="${count + 1}" scope="page"/>

将音频文件推送到列表后，然后通过此索引（计数）访问音频列表，以便它调用确切的音频文件进行播放

如何在 Javascript 的脚本标签中动态访问 JSP 的 forEach 标签值。？

How to access forEach tag values of JSP in Script Tag of Javascript Dynamically.?

javascript

jquery

jsp

servlets

jstl