Question

我试图循环循环jQuery命令5次。这是我的代码：

 for(var i = 0; i < 5; i++) {
    $("#droppable_"+i).droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });
 }

出于某种原因，我无法让它发挥作用。有人能帮帮我吗？

Answer 1

您的更新代码运行正常。请记住，您还需要将某些内容设置为可拖动。

工作示例（使用您的循环）是http://jsfiddle.net/t56TE/

$("#draggable").draggable(); 
for(var i = 0; i < 5; i++) {
    $("#droppable_"+i).droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });
}

HTML：

<div id="draggable" class="ui-widget-content">
    <p>Drag me to my target</p>
</div>

<div id="droppable_1" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_2" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_3" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="droppable_4" class="ui-widget-header">
    <p>Drop here</p>
</div>

Answer 2

正如评论所指出的那样，你在循环中并没有真正做任何有用的事情。（因为您使用的是ID，所以只会有一个“可放置”项目。）

然而，我认为你想要的是你想要对选择器找到的每个项目做所有这些事情。你可以这样做：

$('.select').each(function() {
  // Do your stuff here.
});

您应该在each function上阅读更多内容，了解其运作方式。

Answer 3

在我看来，您有5个要尝试应用droppable的元素，每个元素都有自己唯一的ID。

也许你可以在每个元素上放一个 isDroppable 类，然后你不需要循环你的jQuery代码，只需这样做：

$(".isDroppable").each( function(i,elem) {
    $(elem).droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        }
    });
});

Answer 4

我认为你不知道JQuery可以将函数应用于一组元素！

$('*[id^=droppable]').droppable({
       activeClass: 'ui-state-hover',
       hoverClass: 'ui-state-active',
       drop: function(event, ui) {
          $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
       }
    });

（选择器对类更有效）

Answer 5

为什么不把所有ID都放在选择器中？

如果您计划进一步延伸，我想一个循环就可以了，但是现在我只想坚持下去：

$("#droppable_1, #droppable_2, #droppable_3, #droppable_4, #droppable_5").droppable({
   activeClass: 'ui-state-hover',
   hoverClass: 'ui-state-active',
   drop: function(event, ui) {
      $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
   }
});

在jQuery中循环

5 个答案: