Question

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

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

然而，重复时，我希望新的cat.jpg显示为原始尺寸的一半。我希望每次点击新的cat.jpg时都会继续这样做。

关于如何实现这一目标的任何想法？是否可以通过.clone()注入新的样式/类/参数？

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");
});

小提琴：http://jsfiddle.net/G6XTz/

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

小提琴2：http://jsfiddle.net/G6XTz/1/

<强>警告：

宽度和高度只能划分到目前为止;最终你会遇到一些问题。最好先检查除法的结果，并在有意义的时候做出别的决定。

Answer 2

使用img元素将宽度设置为一半似乎就足够了，高度会根据宽度自动设置：

$('#container').on('click','img.cat', function() {
    $(this).clone()
           .appendTo('#container')
           .width(function(i,v) { return v/2;});
});

演示：http://jsfiddle.net/Mr2x8/

但如果您发现需要设置宽度和这里的高度是一种方法：

$('#container').on('click','img.cat', function() {
    var $this = $(this);
    $this.clone()
         .appendTo('#container')
         .width($this.width()/2)
         .height($this.height()/2);
});

演示：http://jsfiddle.net/Mr2x8/1/

Answer 3

id执行此操作：

$（本）.clone（）addClass（ '小'）appendTo（ '＃容器'）;

这会将css类添加到小的克隆中。

Answer 4

使用要在CSS文件中动态更改的特定新样式创建一个新类。

.newClass {
  //example green outline
  outline: solid thin green;
}

然后修改你的脚本：

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

编辑：

如果您想要更改的唯一内容是img的大小，那么每次点击可以说10％：

$('img.cat').on("click", function() {
  var width = $(this).width() * 0.9;
  var height = $(this).height() * 0.9;

  $(this).clone().css({"width":width+"px", "height":height+"px"}).appendTo('#container');
});

以上代码会生成相同的图片，但比点击的图片小10％。

如果您只想点击初始图片，只需将width和height变量放在点击功能之外，并在每次点击时将其更新。

注意：

如果初始宽度为px，则在css()添加+"px"，否则添加+"%"（如果是百分比）。

jQuery.clone（）一个元素，然后添加动态样式

4 个答案: