jQuery的计数拖放

Question

我使用的是下面的jsfiddle

http://jsfiddle.net/hP3jc/

我需要以某种方式找出一个计数器来告诉我有多少/哪些红色块放置在低于其灰色框（因为灰色框将代表一个值）

任何帮助/输入将不胜感激！

---

更新时间：http://jsfiddle.net/hP3jc/1/（包括例如计数器模板数递增1和1。所有我现在需要的是编码下去

Answer 1

OK，我现在它的一部分

。

 $('.selector1, .selector2, .selector3, .selector4, .selector5').droppable({ 
      hoverClass: 'hovered', 
      drop: function (event, ui) { 
       $(this).addClass(ui.draggable.attr("class")); 
       CountClasses($(this)); 
      } 
     }); 
    function CountClasses($this) { 
     var classes = $this.attr("class").split(" "); 
     var count = 0; 
     var t = 0; 

     for (t = 0; t < classes.length; t++) 
     { 
      if (classes[t].substring(0, 6) == "option") { 
       count++; 
      } 
     } 
     alert(count); 
    } 

这应作为一个出发点为您服务。

现在，所有你需要做的，就是当你拿起一个红色的盒子，从所有.selector箱删除其类。您可以使用一个简单的jQuery选择器来查找具有该类的所有选择框。

$(".selector.option1").each(function(){ 
    $(this).removeClass(".option1"); 
}); 

我认为上述应该可以工作，虽然它没有经过测试。

这是否有道理？

编辑

添加到您的.draggable({代码来获取类红框。这是代码应该去除所有.selector框中的那个类的地方。

start: function() { alert($(this).attr("class").split(" ")[0]) } 

编辑2

http://api.jquery.com/attribute-starts-with-selector/

这说明你如何在部分名称选择。

所以$("div[class^="selector"].optionX").each....

非常未经测试，但看起来接近