1

ここに画像の説明を入力

(私のコードもここにあります: http://jsbin.com/urupig/4/edit

「次へ」と「前へ」ボタンは機能しますが、 「ジャンプ」ボタンは機能しません。)

こんにちは、私は JavaScript と CoffeeScript の初心者です。

「Jump」要素を抽出し、jQuery UI メニューから各画像にジャンプしたい。

以下のコードでは、画像に Flickr API を使用しています。まずはAjax通信を行い、画像のURLを読み込みました。

画像ごとにジャンプしたいのですが、「ジャンプ」要素の子をクリックすると、コンソールに「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>

コーヒースクリプト:

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; これは、クリック ハンドラーが同じものへの 1 つの参照を共有することになり、iその値がループ内iの最終的な値になるためです。ifor i in [0..(photo_table2.number - 1)]

標準的な解決策は、ループ本体を自己実行関数でラップして、i必要なときに強制的に評価することです。CoffeeScript はdo、特にこの目的のために以下を提供します (そのセクションの下部を参照)。

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 に答える