如何通过使用jquery单击列表项来“复制”并将一个列表项从一个无序列表附加到另一个列表项？

Question

我目前正在制作我自己的自定义音频播放器。我不想使用jPlayer。我希望能够从“li”点击我的网页中的“ul”并将其附加到播放列表中。这是我的代码。这只是一些测试代码。如果有人可以提供帮助，那就太棒了!!

这是HTML：

<h2>First List</h2>
<p>Click a track below to add to 'Second List' below:</p>
<div class="first">
    <ul>
        <li id="one" class="add"><a href"#">This is a paragraph.</a></li>
        <li id"two" class="add"><a href"#">This is another paragraph.</a></li>
    </ul>
</div>

<h2>Second List</h2>
<div class="second">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>

这是我的js：

function updateList() {
    var self = $(this);
    var holder = self.find("li");
    var trackId = holder.attr("id");
    var trackItem = $("#"+trackId).text();

    $('.second ul').append('<li>' + '<a href"#">' + trackItem + '</a>' + '</li>');
    $('.second ul li:last').hide().slideDown();
}

// Appending the new item
$('.add a').click(function() {
    updateList();
});

Answer 1

首先，针对您的特定问题的许多可能解决方案之一可能如下所示：

$('.add').click(function() {
    $('.second ul').append($(this).removeClass('add').unbind('click'));  
});

您的代码存在一些主要问题。其中之一是，你在你的this函数中引用updateList()（在那种情况下指向window），但这与你在this中收到的LI（指向点击的$('.add a').click()）不同，所以如果你想要处理一个额外的函数你必须将你的click()函数的值传递给updateList()。

最后，因为这是你对stackoverflow的第一个问题，你可能会考虑为你未来的问题使用适当的标签，因为这个问题与音频，播放器或播放列表无关。这是一个简单的jquery问题。

希望我帮助你一点点，并祝你好运实现音频播放器