无法在jquery中添加类 [英] cant add class in jquery
问题描述
我正在尝试将类（.trans）添加到我在jquery中新制作的克隆中。但它不起作用。
...
当我将课程直接应用于我的对象然后它完美地工作。
i am trying to add class (.trans) to my newly made clone in jquery. .but its not working. ... when i am applying class directly to my object then its working perfectly.
我想做的是..
- 我取一些图片从数据库到我的页面。
- 与foreach循环我显示了那些图像..
- 然后在jquery clone方法的帮助下我创建了一个克隆特别是当我点击它时，克隆将在另一个div中显示
。 - 现在我想在我新创建的克隆中添加一个特定的类。但它没有工作..
（注意：当我在同一个类上直接应用新鲜对象（不是克隆）时，它的工作时间）
- i fetch some images from database to my page.
- with foreach loop i displayed those images..
- then with the help of jquery clone method i create a clone of particular image when i clicked on it and the clone will displayed in a different div.
- now i want to add a particular class to my newly created clone. but its not working.. (NOTE: when i am applying the same class directly on the fresh object(not clone) that time its working)
仅供参考最终结果应如下所示，但在制作克隆后.. http://jsfiddle.net/66Bna/293/
only for reference final result should look like this but after making clone.. http://jsfiddle.net/66Bna/293/
这是我的代码......
here is my code...
<?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>
推荐答案
好的，看。发生的事情是你正在激活文档末尾的Free Transform插件，所有插件的作用是将现有元素与该类一起使用并为它们提供功能。
Ok, look. What is happening is that you're activating the Free Transform plugin in the end of the document and all the plugin does is to take the existing elements with that class and give them the features.
当我们动态添加元素和类时，插件不会考虑它们，因为在调用插件时，元素不存在。
When we add elements and classes dynamically, they're not being taken in account by the plugin because by the time the plugin was being called, the elements didn't exist.
明白了吗？
因此，看到我没有适当的开发环境，我会建议一些可能的解决方案：
So, seeing that I don't have the proper development environment for this, I will suggest some possible solutions:
1）将此脚本放在Free Transform插件声明下方的底部
1) Put this script at the bottom, below the Free Transform plugin declaration
<script>
$(document).ready(function(){
$(".my_image").click(function(){
$(this).clone().addClass("trans").appendTo(".block");
});
});
</script>
2）为每个添加的元素初始化插件编辑：修正了一些逻辑错误
2) Initialize the plugin for each added element Fixed some logic mistake
<script>
$(document).ready(function(){
$(".my_image").click(function() {
$(this).clone().appendTo(".block").freetrans({
x: 50,
y: 50
});;
});
});
</script>
现在试试吧
这篇关于无法在jquery中添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
