Question

我正在尝试将类（.trans）添加到我在jquery中新制作的克隆中。但它不起作用。 ... 当我直接将类应用于我的对象时，它的工作完美。

我想做的是......

我从数据库中获取一些图像到我的页面。
使用foreach循环我显示了那些图像..
然后在jquery clone方法的帮助下，当我点击它时，我会创建一个特定图像的克隆，并显示克隆在一个不同的div。
现在我想在我新创建的克隆中添加一个特定的类。但它没有工作.. （注意：当我将同一个类直接应用于新鲜对象（而不是克隆）时，它的工作时间）

仅供参考最终结果应如下所示，但在制作克隆之后.. 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>

Answer 1

好的，看。发生的事情是你在文档的最后激活了Free Transform插件，而插件所做的就是将现有元素与该类一起使用并为它们提供功能。

当我们动态添加元素和类时，插件不会考虑它们，因为在调用插件时，元素并不存在。

明白了？

所以，看到我没有适当的开发环境，我会建议一些可能的解决方案：

1）将此脚本放在Free Transform插件声明

下面的底部

<script>
$(document).ready(function(){
    $(".my_image").click(function(){
        $(this).clone().addClass("trans").appendTo(".block");
    });
});
</script>

2）为每个添加的元素初始化插件编辑：修复了一些逻辑错误

<script>
$(document).ready(function(){
    $(".my_image").click(function() {
        $(this).clone().appendTo(".block").freetrans({
           x: 50,
           y: 50
        });;
    });
});
</script>

现在试试吧

无法在jquery中添加类

1 个答案: