先看如下代码:
(function ($) { var div = $("<div></div>").css({width: "100px", height: "100px"});
var colors = ["red", "blue", "yellow"];
for (var c = 0; c < colors.length; c++) {
var perDiv = div.clone();
perDiv.css({
background: colors[c]
});
perDiv.click(function () {
console.log(colors[c]);
});
$("body").append(perDiv);
} })($);
效果图:
无论点击那个div都是输出 underfined
所以此代码不能解决每个div点击出现不同的事件。
改进代码:
(function ($) { var div = $("<div></div>").css({width: "100px", height: "100px"});
var colors = ["red", "blue", "yellow"];
for (var c = 0; c < colors.length; c++) {
var perDiv = div.clone();
perDiv.css({
background: colors[c]
});
perDiv.addClass("a"+c);
$("body").append(perDiv);
} for (var e=0;e<colors.length;e++){
$(".a"+e).click(function () {
console.log($(this));
});
}
})($);
效果:
如图,每当点击一个对应就输出一个信息。
总结:给每个元素添加个class或id 就行了╮(╯▽╰)╭
补充:2016-09-24
先看代码:
$(function () { var colors = ["red", "blue", "green"];
var div = $("<div></div>").css({width: "100px", height: "100px"}); for (var i = 0; i < colors.length; i++) {
var odiv = div.clone();
$("body").append(odiv);
odiv.index = i;
odiv.css({background: colors[odiv.index]});
}
});
效果图:
看效果和上面一样。
这个的好处:没有添加类名,还实现了 "有分别"
思路:通过给odiv附加个属性index来保存与其他odiv的不同
感觉这样写 高大上 有木有。。
补充:2016-11-30 10:07:36
var colors = ["red", "blue", "green"];
var div = $("<div></div>").css({width: "100px", height: "100px"});
function cloneDiv(num) {
for (var i = 0; i < num; i++) {
var odiv = div.clone();
odiv.css("background", colors[i]);
$("body").append(odiv);
odiv.on("click", function () {
console.log(this);
})
}
}
cloneDiv(colors.length);
运用this,实现不同。。