CODEWITHSUNDEEP
javascriptjquerycoffeescripthaml
mtthwbsh
mtthwbsh

Reputation: 227

Find specific div on click and toggle class

Here's my current markup:

      .image_container{style: 'background-image: url(' + item['image'] + ')'}

      [...]

        .product_images_link{data: {id: item["objectId"]}}

      %form.product_info{action: "post", id: "item_#{item['objectId']}"}
        %h3.title= item['name']
        %a.remove

I have a CoffeeScript function that toggles class ".add" on a.remove. I want click this link to also toggle a class of "unselected" to ".image_container".

My current function looks like this:

 toggleProduct: (evt) ->
   button = $(evt.currentTarget)
   button.toggleClass 'add'
   $(evt.currentTarget).find('.image_container').toggleClass 'unselected'

How do I find and toggle the class on .image_container?

Upvotes: 0

Views: 730

Answers (1)

lxe
lxe

Reputation: 7609

Is .image_container a child of the button? If so, your code should work. Here's a variation of what I think you're trying to achieve:

http://jsfiddle.net/nhahV/

If it's not inside the button, you just need to use a different jQuery search to find it:

http://jsfiddle.net/nhahV/1/

As you can see, I'm using $button.parent().find('img').

You can also assign it an id, and toggle it based on some property that that button has:

http://jsfiddle.net/nhahV/2/

I added a data-toggle attribute to the button with a value of the id of whatever you want to toggle, and using $('#' + $button.attr('data-toggle')) selector to search for the element.

Upvotes: 1

Related Questions