2

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

一旦创建了副本并且是父容器 div 的子项，我想添加“可拖动”类以便可以拖动它，然后删除“青蛙键”类，这样它就不会创建此副本的另一个副本点击时。

问题是我在点击元素后努力删除“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>

4

1 回答 1

1

你只是错过了一行（另外我不得不在点击事件中重新初始化可拖动 - 但这可能是小提琴的错）：

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

当您克隆元素时，它保留了它的点击事件。.frog-key 实际上已按计划删除，但不是每次都评估；页面加载后，事件将附加到元素及其克隆上，并一直保持到具体未绑定为止。

我希望这有帮助。

于 2013-04-09T16:25:39.797 回答