Question

我正在建立一个音乐网站我有一个部分，您点击一个艺术家名称，我使用jquery将艺术家ID发送到数据库并以他的名义拉出所有歌曲，然后我将它们列在页面上的div中作为链接。

我的问题是，每当我使用.text或.val修改div中的歌曲标题时，如果他有2首歌曲，它只显示第一首歌曲。

但是，如果我使用.append，当我点击1个艺术家名称时，它会将所有歌曲拉得很好，但如果我在同一页面上点击另一个艺术家名称，则会将其歌曲添加到前一位艺术家的歌曲下方。

仅列出1首歌曲，即使有2首歌曲;

$.each(data.resultData, function(key, value) {
    $('value.SongTitles').text(value.artistName +':' + songTitle).fadeIn(); 
});

列出所有歌曲，但在点击新艺术家名称后不会清除以前的艺术家歌曲;

$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Answer 1

每次填充之前清除内容。

$('value.SongTitles').text('');
$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Answer 2

好吧，第一个选项会在每次迭代时重写'value.SongTitles'的内容，这就是为什么只出现一首歌的原因。您可以先使用第二个选项清理'value.SongTitles'，如下所示：

$('value.SongTitles').text("");
$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

Answer 3

如果你使用.append（），顾名思义，它会在最后附加它。试试.html（），它会清除所有以前的内容。

$('value.SongTitles').html(value.artistName +':' + songTitle).fadeIn();

Answer 4

您可以在$ .each循环之前清除，如下所示：

$('value.SongTitles').html('');

$.each(data.resultData, function(key, value) { 
    $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

或者您可以检查密钥，如下所示：

$.each(data.resultData, function(key, value) { 
        if(key == 0){
           $('value.SongTitles').html('');
        }
        $('value.SongTitles').append(value.artistName +':' + songTitle).fadeIn(); 
});

注意，我更喜欢使用.html（），原因如下： What is the difference between jQuery: text() and html() ?

.each列入div

4 个答案: