Grow your CSS skills. Land your dream job.

Coffeescript nested iterations

  • # March 22, 2013 at 11:49 am

    I have a Products page with several products. When you click a product a lightbox pops up with that product and a list of related products. When you hover over the list of related products their images’ opacity should change. I have this working for the very first product with this script:

    $(document).ready ->
    z = $(“.related_products_image”)
    z.each ->
    relid = $(this).data(“imageid”)
    hover = $(“#related_” + relid)
    hover.mouseenter ->
    $(this).css(“opacity”, 1.0)
    hover.mouseleave ->
    $(this).css(“opacity”, 0.4)

    But it only works for the first product. I believe because I have many lists of related products on the page, and I’m not iterating that, so its just picking the first one.

    My html/erb looks like this:

    So I tried creating a nested iteration that looks like this:

    $(document).ready ->
    i = $(“.related_products_list”)
    i.each ->
    listid = $(this).data(‘listid’)
    list = $(“#related_products_list_” + id )
    z = $(“.related_products_image”)
    z.each ->
    relid = $(this).data(“imageid”)
    hover = $(“#related_” + relid)
    hover.mouseenter ->
    $(this).css(“opacity”, 1.0)
    hover.mouseleave ->
    $(this).css(“opacity”, 0.4)

    Thank you!

# March 22, 2013 at 12:40 pm

I think you’re confused about what `each()` should actually be doing. You want something that looks more like:

$(document).ready ->
$(“.related_products_image”).mouseenter (e) ->
relid = $(e.currentTarget).data(“imageid”)
relatedProduct = $(“#related_” + relid)
relatedProduct.css(“opacity”, 1.0)
$(“.related_products_image”).mouseleave (e) ->
relid = $(e.currentTarget).data(“imageid”)
relatedProduct = $(“#related_” + relid)
relatedProduct.css(“opacity”, 0.4)

# March 22, 2013 at 12:42 pm

Or, better yet, don’t use CSS through JS, instead add and remove classes.

$(document).ready ->
$(“.related_products_image”).mouseenter (e) ->
relid = $(e.currentTarget).data(“imageid”)
relatedProduct = $(“#related_” + relid)
relatedProduct.removeClass(‘dimmed’)
$(“.related_products_image”).mouseleave (e) ->
$(‘[SELECTOR FOR ALL IMAGES’).addClass(‘dimmed’)

# March 22, 2013 at 1:01 pm

Hi Doc, thanks for your response. I tried your code and it works for the first product, but not the others. Do you think I need to iterate on

# March 22, 2013 at 1:50 pm

Do you have a link to the site?

# March 22, 2013 at 3:01 pm

[Here you go:](http://pants.telegraphbranding.com/t/women/long-sleeve “Link”)

Thanks Doc.

# March 22, 2013 at 3:06 pm

Where can I see related products?

# March 22, 2013 at 3:13 pm

Click on a main product image, and the seven images lined up at the top of the lightbox are the related images.

# March 22, 2013 at 3:14 pm

The products are all demo products, which is why most of them look the same.

# March 22, 2013 at 3:33 pm

It looks like it’s working for me? I don’t really know what should be happening. When I hover over an image, its opacity changes. Is that what you were trying to do? Or should something *else* on the page have its opacity change?

# March 22, 2013 at 3:37 pm

The opacity changes for the _first_ product on the page (the product titled ‘black temptress’ directly to the right of the rectangle box that reads ‘the hitch hiker’. But it does not work for any product after that one. That’s why i feel like their is an issue with my iterations.

# March 22, 2013 at 3:38 pm

Click on a product below the first row, and in its light box hover over the seven related images at the top and their opacity will not change.

# March 22, 2013 at 3:42 pm

Aaaahhh. I see where we’re at now. Okay. This is much simpler than I thought.

CoffeeScript:

$(document).ready ->
$(‘.related_products_image’).mouseenter (e) ->
$(e.currentTarget).removeClass(‘dimmed’)
$(“.related_products_image”).mouseleave (e) ->
$(e.currentTarget).addClass(‘dimmed’)

CSS:

.related_products_image.dimmed {
opacity: 0.4;
}

# March 22, 2013 at 3:50 pm

Sheesh, I’m sorry. I can’t get it to work.

HTML:

Coffeescript:

$(document).ready ->
$(‘.related_products_image’).mouseenter (e) ->
$(e.currentTarget).removeClass(‘dimmed’)
$(“.related_products_image”).mouseleave (e) ->
$(e.currentTarget).addClass(‘dimmed’)

CSS:

.dimmed {
opacity: 0.4;
}

# March 22, 2013 at 3:51 pm

This broke it on the first product as well.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

Projects

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".