The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Adding a coffeescript iteration function to a multi-function script

  • # March 15, 2013 at 3:32 pm

    I have the following iteration function:

    $.each $(“.main-image”), (index, elem) ->
    console.log $(elem).data(“productid”)

    which pulls out all the `

    # March 15, 2013 at 3:58 pm

    > But right now if you hover a thumbnail it switches out all the main images on the entire page.

    I just sounds like you need to start using a form of `$(this)` instead of selecting *all* `.main-image` divs. So you have this in your mouseenter:

    ($ ‘.main-image img’)

    But you should just be doing something like this:


    Or something similar.

    # March 15, 2013 at 4:12 pm

    Wow. I have been stuck on this for two days. And you’ve gotten me to the point where every image on the page isn’t changing! Thank you. However, when you hover a thumbnail it changes the thumbnail out with a big image, not switch the big image out with the thumbnail. Here’s my updated coffeescript function:

    add_image_handlers = ->

    thumbnails = ($ ‘.product-images ul.thumbnails’)
    ($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, $(this).find(‘img’)
    thumbnails.find(‘li’).eq(0).addClass ‘selected’
    thumbnails.find(‘a’).on ‘click’, (event) ->
    ($ ‘.main-image’).data ‘selectedThumb’, ‘productid’, ($ event.currentTarget).attr(‘href’)
    ($ ‘.main-image’).data ‘selectedThumbId’, ‘productid’, ($ event.currentTarget).parent().attr(‘id’)
    ($ this).mouseout ->
    thumbnails.find(‘li’).removeClass ‘selected’
    ($ event.currentTarget).parent(‘li’).addClass ‘selected’
    thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
    $(this).find(‘img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

    thumbnails.find(‘li’).on ‘mouseleave’, (event) ->
    $(this).find(‘img’).attr ‘src’, ($ ‘.main-image’).data(‘selectedThumb’)

    And here’s a url to the page:

    Thanks so much for your help. I very much appreciate it.

    # March 15, 2013 at 4:16 pm

    1) I would add a class of ‘product’ to each of the products li.

    Then you can do something like this:

    $(this).parents(‘.product’).find(‘.main-image img’)…..

    # March 15, 2013 at 4:26 pm

    I’m sorry, I’m not following. Where would you put

    $(this).parents(‘.product’).find(‘.main-image img’) ?

    I appreciate your help.

    # March 15, 2013 at 6:27 pm


    thumbnails.find(‘li’).on ‘mouseenter’, (event) ->
    $(this).parents(‘.product’).find(‘.main-image img’).attr ‘src’, ($ event.currentTarget).find(‘a’).attr(‘href’)

    # March 15, 2013 at 7:24 pm

    Thank you so much. I’ve been scratching my head for two days over this one. Your solution works perfectly. I very much appreciate your time.

    # March 15, 2013 at 10:32 pm


    You can really bash your head against the wall with this stuff and lose site of the small details. A second pair of eyes usually catches the problem right away.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed