jQuery.clone（）一個元素，然後添加動態樣式

假設我有一個圖像，cat.jpg，點擊時我想克隆它。jQuery.clone（）一個元素，然後添加動態樣式

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

在重複，但是，我希望新cat.jpg顯示爲原來的一半大小。我希望這種情況在每次點擊新的cat.jpg時繼續發生。

有關如何完成此任務的任何想法？是否可以通過.clone()注入新的造型/類/參數？

來源

2014-01-06 daveycroqet

克隆一個元素後 - 它是一個分離的DOM元素，你可以做任何你想做的事情。 – zerkms

爲什麼不轉到[jsfiddle.net]（http://jsfiddle.net/）並自己嘗試一下？ – Christian

整天都在使用jsfiddle.net。 ;-)剛剛被難倒了。 – daveycroqet

這聽起來像下面就是你追求的：

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

當然，你可能會想新加入的圖像成爲最後的一半大小貓的形象，而不是貓圖片點擊：

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

警告：

寬度和高度只能劃分到目前爲止;最終你會遇到一些問題。首先更好地檢查部門的結果，並在有意義時做出決定去做別的事情。

來源

2014-01-06 00:11:14 Sampson

您發佈了此答案，同時我正在研究CodePen，以說明本質上相同的JS！在這裏，爲了說明：http://codepen.io/davidtheclark/pen/JmuKg – davidtheclark

謝謝你們兩位;這正是我所期待的。我一直在使用jQuery的.css，我不知道爲什麼我自己無法弄清楚。也許腦子炸了。無論哪種方式，你的實現比我想出的任何東西都好。 – daveycroqet

ID做到這一點：

$（本）.clone（）addClass（ '小'）appendTo（ '＃集裝箱'）;

這個加上對這個克隆小的css類。

來源

2014-01-06 00:10:52 Nathan

OP希望每個新的img都比上一個更小，那麼如何創建一個新的類呢？ – nnnnnn

我上面的回覆Stefanos的回答的評論也適用於此處。感謝您發佈，我很感激！ – daveycroqet

用你想要在CSS文件中改變dynamicaly的特定新樣式創建一個新類。

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

上面的代碼會產生相同的圖像但是比點擊圖片的圖片小012％，比較小。

如果您只想點擊初始圖片，那麼只需將width和height變量放在點擊功能之外，並在每次點擊時將其更新。

注：

在css()添加+"px"如果初始寬度是在PX否則你添加+"%"如果是在百分比。

來源

2014-01-06 00:15:02

OP希望每個新的img繼續變得小於上一個，那麼如何創建一個新的類呢？ – nnnnnn

這實際上正是我與自己掙扎的東西。出於某種原因，我也試圖通過類來實現，而不是通過編程來實現，而且它還沒有實現。我知道有一種更好的方式，但我自己無法理解。 – daveycroqet

希望我上次編輯幫助你。讓我知道如果這工作。 –

只設置寬度的一半似乎足以與一個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/

來源

2014-01-06 00:16:30 nnnnnn

謝謝。如果可以的話，我會獎勵你的回答。這工作也很漂亮。 – daveycroqet

jQuery.clone（）一個元素，然後添加動態樣式

回答

相關問題