Home/ Questions/Q 8860155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:12:52+00:00

(My code is also here: http://jsbin.com/urupig/4/edit Next and Previous button is working but Jump

  • 0

enter image description here

(My code is also here: http://jsbin.com/urupig/4/edit

“Next” and “Previous” button is working but “Jump” button does not work.)

Hello, I am newbie of JavaScript and CoffeeScript.

I want to extract “Jump” element and want to jump to each image from jQuery UI menu.

Below code uses Flickr API for image. At first, Ajax communication was done and the URLs of images was loaded.

I want to jump each image but when children of “Jump” element was clicked, “index is out of number” was written in console.

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

Thank you for your kindness.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re having the standard “closure in a loop problem”. You’ll notice that console.log('index: ', index) always says 5; that’s because the click handlers end up sharing one reference to the same i and the value of that i will be the final value that i had in the for i in [0..(photo_table2.number - 1)] loop.

    The standard solution is to wrap the loop body in a self-executing function to force i to be evaluated when you want it to be. CoffeeScript provides do (see the bottom of that section) specifically for this purpose:

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

    Demo: http://jsbin.com/urupig/5/edit

    • 0