获取循环中生成的变量的值

Question

我有一个制作 table 的循环，每一行都有一个音频文件，播放的音频具有“音频”+i 的 ID，以便为不同的音频提供唯一的 ID。

我正在制作一个进度条，但我需要“i”变量来确定进度条应该作用于哪个音频，如果我用一个数字替换“i”，那么它就可以工作。我只是还没有找到获取“i”变量的方法。

HTML/PHP 其中循环和音频是：

for($i=0; $i<$count; $i++){
$res = mysqli_fetch_array($result);
echo('<tbody id="tbody">
    <tr>
    <audio id="audio'.$i.'" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3"> 
    <td><button class="playbutton" id="playbtn'.$i.'" onclick="playStop('.$i.')">▷</button></td>
    <td><img class="songimg" src="getimage.php?id='.$res["song_id"].'"/> </td>    
    <td>'.$res["song_title"].'</td>
    <td>'.$res["song_artist"].'</td>
    <td>'.$res["song_genre"].'</td>
    <td>'.$res["song_album_name"].'</td>
    </tr>
</tbody>');
}    
}

我需要“i”变量的进度条码：

 var progressbar = document.getElementById("progress-bar");
 progressbar.onclick = function(e) {
    var audio = document.getElementById("audio"+i);
    audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
    }
}

提前致谢。

Answer 1

根据您的代码，您在 javascript 中已经有一个 playStop() 停止函数，您可以在其中将 i 的值作为字符串传递给它。从这个设置中，您可以设置一个“应用程序级别”全局，其中 i 被存储以供代码中的其他 javascript 脚本使用。

例如

app = {};
app.currentI = -1;
function playStop(i) {
  app.currentI = parseInt(i);

  // the rest of code
}

...

 var progressbar = document.getElementById("progress-bar");
 progressbar.onclick = function(e) {
    if (app.currentI > -1) {
      var audio = document.getElementById("audio" + app.currentI);
      audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
    }
}

由于 (e) 将成为目标，您在单击它时需要它，因此 app.currentI 是 PHP 一侧的 i 您还需要通过调用 playStop().

知道点击了哪个音频，因为它已经 hard-coded

可能有更好的方法来完成所有这一切，但无需我自己测试，此解决方案使用您当前的设计方法并且应该可以在没有任何重大调整的情况下工作。

更新：关于我不能让这个对我有用，也许我想念理解，但是当我测试这个时，它没有工作，我尝试记录 app.currentI 的值以查看它是否有问题，并且我得到“应用程序未定义”。 -- yksi

这是一个工作示例。本例中的 app 本身将在全局范围内定义。

var app = {};
app.currentI = -1;

function playStop(i) {
    app.currentI = i;
    console.log(app.currentI);
}

<!doctype html>
<html>
<head>
</head>
<body>
<button onclick="playStop(0)" type="button">Play/Stop 0</button></br>
<button onclick="playStop(1)" type="button">Play/Stop 1</button></br>
<button onclick="playStop(2)" type="button">Play/Stop 2</button></br>
<button onclick="playStop(3)" type="button">Play/Stop 3</button></br>
<button onclick="playStop(4)" type="button">Play/Stop 4</button></br>


</body>
</html>

我只显示 PHP 部分的渲染 html，但该代码看起来如下所示：

<?php
    for ($i = 0; $i < 5; $i++) {
?>
<button onclick="playStop(<?php echo $i; ?>)" type="button">Play/Stop <?php echo $i; ?></button></br>
<?php   
        
    }
?>

通过这种方式，您将不需要任何隐藏的 dom 变量，并且可以将所有应用级别的特定内容存储到 javascript 对象中，例如app 或您指定的任何其他名称。

Answer 2

其中一种方法是使用隐藏字段来存储“i”的值。

因此在您的页面中，添加以下 HTML 隐藏字段（假设我将其设置为初始值 0 ，但您可以使用其他初始值）：

<input type=hidden id=activei value="0">

现在在你的函数 playStop(i) 中，添加一条语句来将 i 值存储到隐藏字段中：

function playStop(i)
{
document.getElementById("activei").value=i;
//// other commands
}

然后，改为使用

 var progressbar = document.getElementById("progress-bar");
 progressbar.onclick = function(e) {
    var audio = document.getElementById("audio"+document.getElementById("activei").value);
    audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
    }
}

获取循环中生成的变量的值

Get the value of a variable made in a loop

html

javascript

php

audio