javascript - jQuery.clone() 一个元素，然后给它添加动态样式

Question

假设我有一张图片，cat.jpg，点击后我想克隆它。

$('img.cat').on("click", function() {
  $(this).clone().appendTo('#container');
});

但是，在复制时，我希望新的 cat.jpg 显示为原始大小的一半。我希望每次单击新的 cat.jpg 时都继续发生这种情况。

关于如何实现这一点有什么想法吗？甚至可以通过 .clone() 注入(inject)新的样式/类/参数吗？

Answer 1

这听起来像是您所追求的:

// If all images are within #container, use $("#container") instead:
$(document).on("click", "img.cat", function () {
    var original = $(this);
    original.clone().css({
        width: original.width() / 2,
        height: original.height() / 2
    }).appendTo("#container");
});

fiddle :http://jsfiddle.net/G6XTz/

当然，您可能希望新添加的图像是最后一张猫图像的一半大小，而不是单击的猫图像:

Fiddle2:http://jsfiddle.net/G6XTz/1/

警告:

宽度和高度只能划分到此为止；最终你会遇到一些问题。最好先检查除法的结果，然后在有意义的时候决定做其他事情。