(我的代码也在这里:http://jsbin.com/urupig/4/edit
“下一个”和“上一个”按钮可以使用，但“跳转”按钮不起作用。)
您好，我是 JavaScript 和 CoffeeScript 的新手。
我想提取“跳转”元素，并希望从 jQuery UI 菜单跳转到每个图像。
下面的代码使用 Flickr API 来处理图像。首先，完成Ajax通信并加载图像的URL。
我想跳转每个图像，但是当单击“Jump”元素的子元素时，控制台中写入“index is out of number”。
HTML:
<body>
<ul id="menu">
<li><a href="#" id="next">Next</a></li>
<li><a href="#" id="previous">Previous</a></li>
<li>
<a href="#" id="jump">Jump</a>
<ul id="jump_ul">
</ul>
</li>
</ul>
<br />
<div id="images"></div>
</body>
CoffeeScript :
class PhotoTable2
json: null
number: null
constructor:(number) ->
@number = number
getData:(successCallback) =>
$.getJSON(
'http://www.flickr.com/services/rest/?jsoncallback=?'
format : 'json'
method : 'flickr.photos.search'
api_key : '7965a8bc5a2a88908e8321f3f56c80ea'
user_id : '29242822@N00'
per_page : @number
(data) =>
@json = data.photos.photo;
successCallback?())
url:(index) ->
item = @json[index]
itemFarm = item.farm
itemServer = item.server
itemID = item.id
itemSecret = item.secret
itemPathList =
'http://farm' + itemFarm + '.static.flickr.com/' + itemServer +
'/' + itemID + '_' + itemSecret + '_m.jpg'
putPhoto:(index) ->
if (0 <= index and index <= (@number - 1))
$('#images').empty()
$('#images').append(
$('<h3></h3>')
.text(@json[index].title)
$('<a></a>')
.append(
$('<img />')
.attr('src', @url(index))))
else
console.log('index is out of number')
console.log('index: ', index)
$ ->
index = 0
photo_table2 = new PhotoTable2(5)
photo_table2.getData(successCallback = ->
console.log('Data loaded',photo_table2.json)
photo_table2.putPhoto(index)
$('#next')
.click ->
index++
photo_table2.putPhoto(index)
$('#previous')
.click ->
index--
photo_table2.putPhoto(index)
for i in [0..(photo_table2.number - 1)]
$('#jump_ul').append(
$('<li></li>').append(
$('<a></a>')
.text(photo_table2.json[i].title)
.click ->
photo_table2.putPhoto(i)
console.log(i)
)
)
$("#menu").menu()
)
谢谢你的好意。
最佳答案
您遇到了标准的“循环闭包问题”。您会注意到 console.log('index: ', index) 总是显示 5；这是因为点击处理程序最终共享对同一 i 的一个引用，并且该 i 的值将是 i 中的最终值for i in [0..(photo_table2.number - 1)] 循环。
标准解决方案是将循环体包装在自执行函数中，以强制在您需要时对 i 进行求值。 CoffeeScript 提供do (请参阅该部分的底部)专门用于此目的:
for i in [0..(photo_table2.number - 1)]
do (i) ->
# Continue as before
关于javascript - 提取 jQuery UI 菜单元素并跳转到每个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13467824/