创建可拖动的& quot;" stop& quot; jQueryfor循环中的回调 [英] Creating jquery draggable "stop" callbacks in a for loop

问题描述

我有一个for循环，通过可变数量的可拖动元素进行迭代，为每个元素创建一个停止事件回调.回调函数需要知道链接到的项目的索引.

I have a for loop iterating through a variable number of draggable elements, creating a stop-event callback for each. The callback function needs to know the index of the item that it is linked to.

我遇到了一个我认为是关闭问题的问题:触发回调时，传递给回调(_x)的循环迭代器索引变量的状态是循环迭代器索引的最后一个值，而不是比定义回调函数时该迭代器索引的值大.下面的一些咖啡脚本:

I've encountered what I think is a closure problem: when the callbacks are fired off, the state of the loop iterator index variable that gets passed to the callback (_x) is the last value of the loop iterator index, rather than the value of that iterator index at the time the callback function was defined. Some coffeescript below:

for _x in [0..total]
  $(window).ready $(".draggable-#{_x}").draggable
    cursor: 'move'
    handle: ".draggable-image-move-button-#{_x}"
    containment: 'div#banner-builder-preview'
    stop: =>
      alert "x === #{_x}"

在上面的示例中，警报提示将始终打印"x === total + 1"，而不是"x === 0"，"x === 1" ...等.

In the example above, the alert prompt will always print "x === total+1" rather than "x === 0", "x === 1"... etc.

为每个具有stop事件的元素将唯一索引传递给回调的最佳解决方案是什么?我更愿意这样做，而不求助于另一个jquery选择器从触发回调的任何元素中提取更多数据.

What's the best solution to pass a unique index to the callback for each of the elements that have a stop event? I would prefer to do this without resorting to yet another jquery selector to pull more data from whatever element fired off the callback.

更新:

我现在遇到的另一个问题:在for循环中，我的回调看不到文件中定义的其他函数.我认为这很奇怪，即使定义发生在使用for循环创建匿名回调函数之前.

Another problem I'm now running into: my callback, within the for loop, cannot see other functions defined in the file. I think that's very odd, even if the definition happens before the for loop is used to create the anonymous callback functions.

例如:

for _x in [0..total]
  do (_x) ->
    $(window).ready $(".draggable-#{_x}").draggable
      cursor: 'move'
      handle: ".draggable-image-move-button-#{_x}"
      containment: 'div#banner-builder-preview'
      stop: =>
        someFunction _x  # ... this line throws an exception, not defined
        alert "x === #{_x}

推荐答案

问题是您的回调函数:

stop: =>
  alert "x === #{_x}"

最终都引用了 _x ，但是直到调用它们，他们才对 _x 求值.在发生这种情况时， _x 的值为 total + 1 .这是一个很常见的问题，CoffeeScript的 do 关键字可以提供帮助:

all end up referencing _x but they don't evaluate _x until they get called. By the time that happens, _x has the value total + 1. This is such a common issue that CoffeeScript has the do keyword to help:

使用JavaScript循环生成函数时，通常会插入一个闭包包装，以确保循环变量被封闭，并且所有生成的函数不仅共享最终值.CoffeeScript提供了 do 关键字，该关键字立即调用传递的函数，并转发所有参数.

When using a JavaScript loop to generate functions, it's common to insert a closure wrapper in order to ensure that loop variables are closed over, and all the generated functions don't just share the final values. CoffeeScript provides the do keyword, which immediately invokes a passed function, forwarding any arguments.

所以您可以这样说:

for _x in [0..total]
  do (_x) ->
    $(window).ready $(".draggable-#{_x}").draggable
      #... as before

这篇关于创建可拖动的& quot;" stop& quot; jQueryfor循环中的回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！