我正在尝试将类(.trans)添加到我在 jquery 中新创建的克隆中。 .但它不起作用。
...
当我将类直接应用于我的对象时,它可以完美地工作。
我想做的是..
- 我从数据库中获取一些图像到我的页面。
- 使用 foreach 循环我显示了这些图像..
- 然后在 jquery 克隆方法的帮助下,当我单击它时,我创建了特定图像的克隆,并且该克隆将显示
在不同的 div 中。
- 现在我想向我新创建的克隆添加一个特定的类。但它不工作..
(注意:当我直接在新对象(而不是克隆)上应用相同的类时,它的工作时间)
仅供参考最终结果应该是这样的,但是在克隆之后..http://jsfiddle.net/66Bna/293/ http://jsfiddle.net/66Bna/293/
这是我的代码...
<?php
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";
$image = explode(",", $image);
?>
<html>
<head>
<link rel="stylesheet" href="../css/jquery.freetrans.css">
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>
<style>
body{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
.shape{
width: 300px;
height: 250px;
background-color: #B2D237;
color: #123456;
}
#bounds {
position: absolute;
border: 1px solid red;
}
.block{
width:100%;
background:red;
}
</style>
</head>
<body>
<div class="library">
<ul>
<?php
foreach ($image as $key => $img) {
echo "<li class='img_block'><img class='my_image' src='assets/$img'></li>";
}
?>
</ul>
</div>
<div class="block"></div>
<script src="../js/Matrix.js"></script>
<script src="../js/jquery.freetrans.js"></script>
<script>
$(function(){
// do a selector group
$('.trans').freetrans({
x: 50,
y: 50
});
//updating options, chainable
$('#two').freetrans({
x: 200,
y: 100,
angle: 45,
'rot-origin': "50% 100%"
})
.css({border: "1px solid pink"})
var b = $('#two').freetrans('getBounds');
console.log(b, b.xmin, b.ymax, b.center.x);
$('#bounds').css({
top: b.ymin,
left: b.xmin,
width: b.width,
height: b.height
})
})
</script>
</body>
</html>