1

我正在开发一个 Jquery 项目，其中用户可以将“药丸”拖到“杯子”中，然后可以显示杯子中的药丸数量，但是如果用户移动，一旦药丸在杯子中，我就会遇到问题它算作再次被丢弃的药丸。如何让可拖动（药丸）在放入可放置（杯）时计数一次。它是存储数组或将标识符附加到每个药丸的 for/if 循环的情况吗？

这是我的一些代码html

       <div id="PillSpace">
       <div class="PillCup"><p>accept: '#Pill'</p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div><br>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div><br>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       <div class="Pill"><p><img src="resources/capsule.png"/></p></div>
       </div>

JQuery 是：

      $(document).ready(function() {
    var count = 0;
    $( ".Pill").draggable();

    $( ".PillCup" ).droppable({
        accept: ".Pill",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        over:function(){
            $( ".PillCup" ).find("p").html(count).text;
        },
        out:function(){
        count--;
            $( ".PillCup" ).find("p").html(count).text;
        },
        drop: function( event, ui ) {
            count++;
            $( ".PillCup" ).find("p").html(count).text;
        }

    });
});

希望有人可以帮助

多谢你们

4

1 回答 1

1

尝试计算容器中药丸的总数，而不是增加/减少每一滴的计数：

out: function(){
    count = $(".Pill", ".PillCup").count();
    $( ".PillCup" ).find("p").html(count).text;
},
drop: function( event, ui ) {
    count = $(".Pill", ".PillCup").count();
    $( ".PillCup" ).find("p").html(count).text;
}
于 2012-08-28T13:14:38.573 回答