點擊更改jQuery中的輸入字段值

我的站點搜索Spotify庫並返回結果列表。這個想法是，用戶可以點擊其中一個結果，並將其添加到播放列表中，然後該播放列表將作爲表單提交的一部分發布。下面的代碼將點擊的歌曲添加到.selected-list容器中，然後使用Spotify歌曲href的值向DOM添加隱藏的輸入。點擊更改jQuery中的輸入字段值

這一切都有效，但每次點擊新歌並添加新輸入時，所有以前添加的輸入的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()); 
});

來源

2013-03-29 GuerillaRadio

所以，如果這個想法是創建一個新的隱藏每次將一個項目添加到列表中時輸入我建議執行以下操作。

$('.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()方法進行搏鬥。

來源

2013-03-29 15:51:01 hradac

從可擴展性的角度來看，這當然是有意義的。謝謝。出於興趣，'this'在這一行中引用了什麼 - $ input.val（$（'。track-href'，this）.text（））;它是$輸入嗎？ – GuerillaRadio

@GuerillaRadio這個事件處理程序裏面的'this'應該引用事件被觸發的元素。在這種情況下，元素被點擊。 – hradac

替換您如下代碼：

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

這一個：

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

來源

2013-03-29 15:34:07 Nelson

非常感謝納爾遜！ – GuerillaRadio

這是因爲您正在使用.track類在你的代碼的最後一行的選擇（$('.track').val($('.track-href', this).text()); ）。這將更新所有具有class="track"的元素，如前面的代碼行所示，每個新輸入都具有這些元素。

如果我們可以看到HTML輸出的示例，那麼使用解決方案可能會更容易一些。。。很難說出你選擇的是什麼東西。。。

我最好的猜測，現在，雖然，是嘗試最後兩行合併爲一個，當你創建輸入設定值：

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

來源

2013-03-29 15:36:38 talemyn

我試過這個talemyn，它的功能非常好，非常感謝。 – GuerillaRadio

點擊更改jQuery中的輸入字段值

回答

相關問題