Как получить доступ к значениям тега forEach JSP в теге сценария Javascript динамически.? - PullRequest
Новая
       110

Как получить доступ к значениям тега forEach JSP в теге сценария Javascript динамически.?

0 голосов
/ 03 августа 2020

Я пытаюсь получить все детали каждой дорожки альбома с контроллера (сервлета) на страницу jsp с помощью тега forEach. Значения получаются идеально. следующий код. Но при этом воспроизводится только первая дорожка. Даже при воспроизведении оставшихся дорожек воспроизводится первая композиция. 

<%@ 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 в теге скрипта ..? ?

Ответы [ 2 ]

1 голос
/ 03 августа 2020

При нажатии кнопки воспроизведения вы получаете идентификатор, то есть: ${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>
0 голосов
/ 04 августа 2020 
$('.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();
    }
});

в этом скрипте вы получаете доступ к аудио значениям, которых нет, а также вы должны динамически sh аудиофайлы помещать в список, а затем обращаться к ним

использовать счетчик, как показано ниже на итерация foreach l oop и установка этого количества в теге audio 

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

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

после помещения аудиофайлов в список, а затем доступ к списку аудио через этот индекс (count), чтобы он вызовет точный аудиофайл для воспроизведения

...