javascript - 如何克隆 <a href ="#">Barbara is so Nice</a> 的 anchor html 值并将其附加到 div 容器

Question

如何克隆和附加具有多个 <a href="#">Barbara is so nice</a> 的列表的 anchor html 值元素到 div 容器。我能够克隆.counter元素并将其附加到容器，但无法使用 anchor 。

我创建了一个jsFidle here

这是我的js代码:

$(window).load(function(){
    $('.ordered-list li a').on("click", function() {
        var button = $(this);
        $('.overlay').fadeIn('slow',function(){
            button.find('.user-comment-list').clone().fadeIn(1000).appendTo('.overlay-content-inner');
            button.find('.counter').clone().appendTo('.overlay-title-content');
    });
});
    $('.icon-remove').click(function(){
        $('.overlay').fadeOut('slow');
        $('.overlay-content-inner, .overlay-title-content').empty();
    });
});

Answer 1

我不知道为什么你无法获取 anchor 值。您已经在 anchor 中了。

$('.ordered-list li a').on("click", function() {

您正在将点击事件绑定(bind)到 anchor 。它只会增加您命名引用当前 anchor button 的局部变量的困惑。

而不是:

button.find('.counter').clone().appendTo('.overlay-title-content');

如果您想附加 anchor HTML，可以执行以下操作:

$('.overlay-title-content').append(button.html());

DEMO - 附加 anchor HTML 值

以防演示链接失效，以下是新代码:

$('.ordered-list li a').on("click", function() {
    var button = $(this); // not a button! "this" is referencing the clicked anchor.
    $('.overlay').fadeIn('slow', function() {
        button.find('.user-comment-list').clone().fadeIn(1000).appendTo('.overlay-content-inner');
        $('.overlay-title-content').append(button.html());
        //button.find('.counter').clone().appendTo('.overlay-title-content');
    });
});
$('.icon-remove').click(function() {
    $('.overlay').fadeOut('slow');
    $('.overlay-content-inner, .overlay-title-content').empty();
});​

希望这有帮助。