Javascript 获取Jinja2 for循环中每个项的API调用

我目前正忙于一个个人项目，我正在进行fetchapi调用，以获取html音频标签列表的音频src

fetch调用由曲目上的onclick事件触发。尽管无论我点击的是哪首曲目，fetch calls/play_track/1/都会将音频播放器仅附加到第一首曲目。有办法补救吗

如您所见，my index.html基本上就是jinja2：

{% extends 'base.html' %}

{% block content %}

    {% for track in tracks %}
        {% include '_post.html' %}
    {% endfor %}

{% endblock content %}

下面是带有Fetch调用的_post.html：（当前使用onclick事件进行调用，但将切换到onpageload）

{{track.title}
{{track.artist}
上传到{track.created_at.strftime（“%b%m，%Y”）}
{{{track.id}
函数fetchURL（事件）{
tid=document.getElementById（'track-id'）；
track_id=tid.innerHTML；
获取（`${window.origin}/play\u track/${track\u id}`）
。然后（（响应）=>{
console.log（响应状态）；
返回response.json（）；
})
.then（功能（数据）{
console.log（data.message.url）；
createAudioPlayer（数据）；
});
}
函数createAudioPlayer（数据）{
让cardBody=document.getElementById（'card-body'）；
让audio=document.createElement（'audio'）；
audio.controls=true；
让source=document.createElement（'source'）；
source.type=“音频/mpeg”；
source.src=data.message.url
cardBody.append（音频）；
音频预编（源）；
};

这是后端代码：（我很确定，如果我调整它，我可以避免将所有内容都提取到一起，但这是另一个问题）

@bp.route（'/play\u track/'））
def播放曲目（曲目id）：
track=track.query.filter\u by（id=track\u id）.first（）
res=requests.get（track.audio）
如果不是res.status_code==200：
返回f'状态代码：{res.Status_code}'
json_res=json.loads（res.text）
mpeg_audio_url=json_res['url']
msg_dict={
“url”：mpeg\u音频\u url
}
res=make_response（jsonify（{'message'：msg_dict}））
返回res

总结：获取调用不理解Jinja2 for循环。无论我单击曲目1、10或46等，它都会调用/play_track/1/并将音频标记附加到第一首曲目

谢谢

        function fetchURL(event) {
            tid = event.target;
            track_id = tid.innerHTML;

            fetch(`${window.origin}/play_track/${track_id}`)
                .then((response) => {
                    console.log(response.status);
                    return response.json();
                })
                .then(function(data) {
                    console.log(data.message.url);
                    createAudioPlayer(data, event);
                });
        }

问题出在第一行。您没有获得当前事件目标。
id必须是唯一的，因此每次在轨迹中循环时，都会创建具有相同id的元素。将轨迹id从id更改为类

<p onclick="fetchURL(event)" class="track-id">{{ track.id }}</p>

问题出在第一行。您没有获得当前事件目标。
id必须是唯一的，因此每次在轨迹中循环时，都会创建具有相同id的元素。将轨迹id从id更改为类

<p onclick="fetchURL(event)" class="track-id">{{ track.id }}</p>

---

这会提供正确的音频，但仍会将其附加到第一首曲目。您使用的是document.getElementById。正如我所说，它返回该id的第一个匹配项，这是第一个轨迹。我会为您修复它，但一定要了解id和类以及各种dom函数。我不是。我已将其修复为使用GetElementsByCassName（'track-id'）[0]，它现在显示正确的音频，但仅在第一个曲目上显示。如果使用GetElementsByCassName（“track id”），它将以数组的形式返回该类的所有元素。然后，如果添加[0]，它将获得第一个元素。明白我的意思了。您最终仍将获得第一个元素。您没有获得正确的音频。这会提供正确的音频，但仍会将其附加到第一首曲目。您正在使用document.getElementById。正如我所说，它返回该id的第一个匹配项，这是第一个轨迹。我会为您修复它，但一定要了解id和类以及各种dom函数。我不是。我已将其修复为使用GetElementsByCassName（'track-id'）[0]，它现在显示正确的音频，但仅在第一个曲目上显示。如果使用GetElementsByCassName（“track id”），它将以数组的形式返回该类的所有元素。然后，如果添加[0]，它将获得第一个元素。明白我的意思了。您最终仍将获得第一个元素。你没有得到正确的答案。

<p onclick="fetchURL(event)" class="track-id">{{ track.id }}</p>

        function createAudioPlayer(data, event) {

            let cardBody = event.target.parentElement;

            let audio = document.createElement('audio');
            audio.controls = true;

            let source = document.createElement('source');
            source.type = "audio/mpeg";
            source.src = data.message.url

            cardBody.append(audio);
            audio.prepend(source);
        };