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

替换以下代码：

$('.track').val($('.track-href', this).text());

这个：

$('.submit-spotify').prev('.track').val($('.track-href', this).text());

Answer 2

这是因为您在代码的最后一行（.track）中使用$('.track').val($('.track-href', this).text());类作为选择器。这将更新所有具有class="track"的元素，如前一行代码所示，每个新输入都有。{/ p>

如果我们能够看到您的HTML输出示例，那么帮助您解决方案可能会更容易一些。。。很难说出你选择的是什么东西。。

我现在最好的猜测是尝试将最后两行合并为一个，并在创建输入时设置值：

    $('.submit-spotify').before('<input type="hidden" id="track_href" class="track" value="' + $('.track-href', this).text() + '" name="track_href" />');

Answer 3

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

$('.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对象，您可以将其作为页面上的元素进行操作，并且当您准备将其注入页面的某个位置时。这样，它在DOM中显示的顺序无关紧要，因此如果您必须更改页面上的位置，则无需使用.prev()方法进行摔跤。

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

3 个答案: