1

在此处输入图像描述

（我的代码也在这里：http: //jsbin.com/urupig/4/edit

“下一个”和“上一个”按钮有效，但“跳转”按钮无效。）

你好，我是 JavaScript 和 CoffeeScript 的新手。

我想提取“跳转”元素并想从 jQuery UI 菜单跳转到每个图像。

下面的代码使用 Flickr API 获取图像。首先，完成了 Ajax 通信并加载了图像的 URL。

我想跳转每个图像，但是当单击“跳转”元素的子元素时，“索引超出数字”被写入控制台。

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>

咖啡脚本：

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()
  )

谢谢你的好意。

4

1 回答 1

1

您遇到了标准的“闭环问题”。你会注意到console.log('index: ', index)总是说5; 那是因为点击处理程序最终共享一个对相同的引用，i并且该值i将是循环i中的最终值。for i in [0..(photo_table2.number - 1)]

标准解决方案是将循环体包装在一个自动执行的函数中，i以便在您想要它时强制对其进行评估。CoffeeScriptdo专门为此目的提供（参见该部分的底部）：

for i in [0..(photo_table2.number - 1)]
  do (i) ->
    # Continue as before

演示：http: //jsbin.com/urupig/5/edit

于 2012-11-20T07:20:58.253 回答