javascript - 如何克隆和附加Barbara 的锚 html 值对div 容器非常好

Question

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

我在这里创建了一个 jsFidle

这是我的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

我不确定为什么你不能得到锚值。你已经在锚中了。

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

您正在将点击事件绑定到锚点。它只会增加您命名引用当前锚点的局部变量的混乱button。

代替：

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

如果您想附加锚点 HTML，您可以执行以下操作：

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

演示- 附加锚 HTML 值

如果指向 DEMO 的链接失效，这里是新代码：

$('.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();
});​

希望这可以帮助。