Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › Coffeescript nested iterations

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Author
    Posts
  • March 22, 2013 at 11:49 am #43591
    jtrinker
    Participant

    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 #129358
TheDoc
Member

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 #129359
TheDoc
Member

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 #129360
jtrinker
Participant

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 #129364
TheDoc
Member

Do you have a link to the site?

March 22, 2013 at 3:01 pm #129370
jtrinker
Participant

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

Thanks Doc.

March 22, 2013 at 3:06 pm #129372
TheDoc
Member

Where can I see related products?

March 22, 2013 at 3:13 pm #129377
jtrinker
Participant

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 #129378
jtrinker
Participant

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

March 22, 2013 at 3:33 pm #129381
TheDoc
Member

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 #129382
jtrinker
Participant

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 #129383
jtrinker
Participant

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 #129384
TheDoc
Member

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 #129386
jtrinker
Participant

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

HTML:

  • <%= link_to large_image(related_product, :itemprop => “image”, :data => {:imageid => related_product.id}, :id => “related_” + related_product.id.to_s, :class => “related_products_image dimmed”), url_for(related_product) %>

    • 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 #129387
    jtrinker
    Participant

    This broke it on the first product as well.

  • Author
    Posts
    • Viewing 15 posts - 1 through 15 (of 19 total)
    1 2
    • The forum ‘JavaScript’ is closed to new topics and replies.