Question

我正在制作一个小部件，在汽车行业中被称为压扁的青蛙。它基本上是一辆扁平汽车的图像，上面有图标显示损坏位置。我有一个HTML图像图标列表，我希望在用户点击时将其复制，这样这个HTML图标的副本将被放置在容器div中，然后它可以被拖动到汽车图像上的位置损坏位于。

创建副本并且是父容器div的子项后，我想添加类“draggable”以便可以拖动它，然后删除类“青蛙键“因此，点击时不会再创建此副本的副本。

问题是，在点击元素后，我很难删除“frog-key”类......

这是我的代码......

    <!-- Script -->
<script type="text/javascript">

    $(function () {
        $(".draggable").draggable();
    });

    $(document).ready(function () {

        // when an element is clicked, a duplicate is created that can be dragged.
        // where it is placed is where the coordinates will be saved

        $(".frog-key").click(function () {

            var copy = $(this).clone(true);

            // add a unique ID
            copy.attr("id", copy.attr("data-type") + "-1");

            // remove class frog-key as we dont want a duplicate of this copy
            copy.removeClass("frog-key");

            // add the class draggable  - so it can be dragged - jquery UI
            copy.addClass("draggable");

            // add this copy to the container div
            $("#squashed-frog-container").append(copy);

        });

    })
</script>

HTML

<div id="squashed-frog" class="large">
<div id="squashed-frog-container">
    <img id="squashed-frog-art" src="/Content/Design/img/ART_squashed_frog_large.png">
</div>
<ul class="unstyled" id="squashed-frog-key">
    <li><span class="pointer sprite frog-key dent" data-type="Dent_Bodyshop"></span>Dent <small>(Bodyshop)</small></li>
    <li><span class="pointer sprite frog-key dent-repair" data-type="Dent_SmartRepair"></span>Dent <small>(Smart Repair)</small></li>
    <li><span class="pointer sprite frog-key scratch" data-type="Scratch_Bodyshop"></span>Scratch <small>(Bodyshop)</small></li>
    <li><span class="pointer sprite frog-key scratch-repair" data-type="Scratch_SmartRepair"></span>Scratch <small>(Smart Repair)</small></li>
    <li><span class="pointer sprite frog-key chip" data-type="Scratch_Chip"></span>Chip</li>
    <li><span class="pointer sprite frog-key multi-chip" data-type="Multiple_Chips"></span>Multiple Chips</li>
    <li><span class="pointer sprite frog-key paint" data-type="Paint_OffColour"></span>Paint <small>(Off Colour)</small></li>
    <li><span class="pointer sprite frog-key paint-repair" data-type="Paint_PreviousRepair"></span>Paint <small>(Previous Repair)</small></li>
    <li><span class="pointer sprite frog-key paint-fallout" data-type="Paint_Fallout"></span>Paint <small>(Fallout)</small></li>
    <li><span class="pointer sprite frog-key rust" data-type="Rust"></span>Rust</li>
    <li><span class="pointer sprite frog-key wheel-Scuff" data-type="Wheel_Scuff"></span>Wheel Scuff</li>
    <li><span class="pointer sprite frog-key sidewall" data-type="Sidewall_Damage"></span>Sidewall Damage</li>
    <li><span class="pointer sprite frog-key broken" data-type="Broken"></span>Broken</li>
</ul>

Answer 1

你只是错过了一行（加上我必须在点击事件中重新初始化draggable - 但这可能是小提琴的错误）：

copy.unbind("click");
$(".draggable").draggable();

当你克隆元素时，它保留了它的click事件。 .frog-key实际上是按计划删除的，但每次都没有评估;加载页面后，事件将附加到元素及其克隆，并保持不变，直到明确解除绑定。

我希望这会有所帮助。

Jquery UI - 创建重复的DOM元素，然后添加和删除类

1 个答案: