如何在Javascript的Script Tag中动态访问JSP的forEach标签值。？答案

【问题标题】：How to access forEach tag values of JSP in Script Tag of Javascript Dynamically.?如何在Javascript的Script Tag中动态访问JSP的forEach标签值。？
【发布时间】：2020-11-23 05:56:09
【问题描述】：

我正在尝试使用 forEach 标签将专辑每个曲目的所有详细信息从控制器（servlet）获取到 jsp 页面。这些值被完美地获取。为了结合播放/暂停按钮和音频标签，我编写了以下代码.但是，使用它只会播放第一首曲目。即使在播放剩余曲目时，也会播放第一首歌曲。

<%@ 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 访问值..？？

【问题讨论】：

听起来每个音轨的音频源都相同。 track.track_no 对每条轨道的评价是什么？
track.track_no根据当前track_no检索audi文件
这不能回答我的问题。我没有问track.track_no 做了什么。我问每个track.track_no 的评估结果是什么。
@Geetha 你试过下面的代码吗？

标签： javascript jquery jsp servlets jstl

【解决方案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>

【讨论】：

【解决方案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"/>

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

【讨论】：