javascript - 单击时更改 jQuery 中的输入字段值

Question

我的站点搜索 Spotify 库并返回结果列表。这个想法是用户可以单击其中一个结果并将其添加到播放列表中，播放列表将作为表单提交的一部分发布。下面的代码将点击的歌曲添加到一个 .selected-list 容器中，然后将一个隐藏的输入添加到具有 Spotify 歌曲 href 值的 DOM。

这一切都有效，但每次我点击一首新歌并添加一个新输入时，所有先前添加的输入的 href 也会发生变化。我知道这是因为我正在识别所有输入都有的 .track，但我不太清楚如何去做。

$('.spotify-result').click(function() {
        $(this).clone().appendTo($('.selected-list'));
        $('.submit-spotify').before('<input type="hidden" id="track_href" class="track" value="" name="track_href" />');
        $('.track').val($('.track-href', this).text());
});

Answer 1

因此，如果我的想法是在每次将项目添加到列表时创建一个新的隐藏输入，我建议执行以下操作。

$('.spotify-result').click(function() {
        var $input = $('<input type="hidden" id="track_href" class="track" value="" name="track_href" />');

        $(this).clone().appendTo($('.selected-list'));
        $('.submit-spotify').before($input);
        $input.val($('.track-href', this).text());
});

这会创建一个名为 $input 的 jQuery 对象，您可以像操作页面上的元素一样操作该对象，并在准备就绪后将其注入(inject)页面上的某个位置。这样一来，它在 DOM 中的显示顺序无关紧要，因此如果您必须更改它在页面上的位置，您就不必费心使用 .prev() 方法。