javascript - 当落在同一滴点时如何停止递增变量

Question

我有 7 个放置点和 7 个可拖动元素。我可以对所有 7 个放置点使用相同的元素，或者我可以在同一个放置点上使用所有可拖动元素。我有一个变量 contor，它在放置时递增，但是，如果我将所有元素拖动到同一个放置点上，则该变量达到 7 并且会发生一些情况。我需要的是每个 Dropspot 只增加该变量一次，即使我在同一个 Dropspot 中放置并更改 src 7 次。我的代码如下所示:

jsFiddle link

drop: function( event, ui )
{
    dropTarget = event.target.id;
    indexDrops = dropTarget.charAt(dropTarget.length-1);
    $("#dropspot" + indexDrops).css("opacity", 0);
    $("#dropspot" + indexDrops).children("img").prop('src', dragTarget.src); 
    interval = setInterval(showDrop, 1);
    $(ObjectsToHide[indexDrops]).css('visibility', 'visible');    

    contor++;

    if(contor == 7){
        resetBtn.disabled = false;
        $(dragObjects).draggable("disable");
        updateBubble(2);
    };
}

Answer 1

SOLUTION

你真的需要阅读jquery API ...您的代码中有很多错误...

1 - 不要选择具有 ID 的组:

ObjectsToHide.push(document.getElementById("toChange" + i));

而是使用类来选择多个元素。

ObjectsToHide = $('.class');

2 - 不保存索引:

indexDrags = dragObjects.indexOf(event.currentTarget);

而是将元素本身保存在 var 中，这样您就不必再次选择它。

dragsEl = event.currentTarget;

3 - 不要进行重复查询:

$("#dropspot" + indexDrops).css("opacity", 0);
$("#dropspot" + indexDrops).children("img").prop('src', dragTarget.src);

而是将查询保存在 var 中，然后重用它或直接链接它。

var q = $("#dropspot" + indexDrops)
.css("opacity", 0).children("img")
.prop('src', dragTarget.src);

4 - 如果您只需要单个操作计时器，请使用 setTimeout。除非您希望重复执行某个操作，否则不要使用 setInterval。

5 - 创建 Fiddle 时需要引用库。在你的例子中:jquery 和 jqueryUI。

• 了解更多 http://doc.jsfiddle.net/basic/introduction.html#external-resources

6 - 您需要对图像进行绝对引用，否则它们将不会被加载:

src="images/clouds.svg" 

相反

src="http://your.site/images/clouds.svg"