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

Question

Let's say I have an image, cat.jpg , and when clicked I want to clone it.

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

Upon duplication, however, I want the new cat.jpg to appear as half the size of the original. And I want this to continue happening each time a new cat.jpg is clicked.

Any ideas on how to go about accomplishing this? Is it even possible to inject new styling/classes/parameters via .clone() ?

Answer 1

It sounds like the following is what you're after:

// 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/

Of course, you may have wanted the newly added image to be half the size of the last cat image, rather than the cat image clicked:

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

Caveat:

The width and height can only divide so far; eventually you'll run into some problems. Better check the result of division first, and make a decision to do something else when it makes sense.

Answer 2

Just setting the width to half seems to be enough with an img element, the height gets set automatically in proportion to the width:

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

Demo: http://jsfiddle.net/Mr2x8/

But if you find you need to set the width and the height here's one way to do it:

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

Demo: http://jsfiddle.net/Mr2x8/1/

Answer 3

id do this:

$(this).clone().addClass('small').appendTo('#container');

this adds the css class small to the clone of this.

Answer 4

Create a new class with the specific new styling you want to get changed dynamicaly in your CSS file.

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

And then modify your script:

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

EDIT :

If the only thing you want to change is the size of the img for lets say 10% each click then:

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

The above code will produce the same image but 10% smaller than the image clicked .

If you want to click only the initial image then simply put the width and height variable outside the click function and update them inside for each click.

NOTE :

In the css() you add +"px" if initial width is in px else you add +"%" if it is in percentage.