jQuery + Rails +切换图像

Question

I have a list of checkboxes with associated images and titles in as labels. I run an each loop to pull the data for the checkboxes. I simply want the images to be highlighted when onclick. For some reason, the jQuery toggle script I'm using doesn't work inside the loop.

js:

    <script>
      $("img.choice").click(function() {
        $(this).toggleClass("new").toggleClass("new1");
          });
    </script>

css:

    .new {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      box-shadow: 2px 2px 4px #888888;

    }

    .new:hover {
        box-shadow: 2px 2px 2px #001f36;
        border-color: #FF804D;
    }

    .new:active {
        box-shadow: 2px 2px 2px #001f36;
        border-color: #FF804D;
    }

    .new1 {
      border: outset;
      border-color: #FF804D;
    }


html:

    <div class="row" align='center'>                    
        <% Category.select { |category| category.gender == 'girl' }.each do |category| %>
            <div class="span4" align="center" style="padding-top:15px">
                <label>
                    <div style="padding-bottom:5px">
                        <h13><%= category.name.capitalize %></h13>
                    </div>
                    <img id="choice-<%= category.id -%>" src= <%= category.image %> class="choice new" />
                    <div>
                        <%= check_box_tag 'category_ids[]', category.id %>
                    </div>
                </label>    
            </div>
        <% end %>
    </div>

Answer 1

Here's a JSFiddle:

http://jsfiddle.net/misham/xu6Kf/

you need to wrap the JS code in a $(document).ready, so the events get registered:

<script>
  $(document).ready(function(){
     $("img.choice").click(function() {
       $(this).toggleClass("new").toggleClass("new1");
  });
  }) ;
</script>

Ideally, you should place the JS code in the appropriate file in assets:

app/assets/javascripts/<controller_name>.js

If it doesn't exist, create it. If it's a CoffeeScript file, you can just rename it to .js, or write in CoffeeScript, if that's your thing.

If you want to keep the code in view file, then put it at the bottom and wrap it in

<%= content_for :javascript do -%>
   <!-- JS code here -->
<% end -%>

And then place the following right before closing body tag, </body> :

<%= yield :javascript %>

That way your JS code will get automatically rendered at the bottom, not in the middle of the HTML.

Answer 2

Maybe the reason is that, after iterating through your loop, are having multiple <img id="choice" /> tags which is invalid HTML. Your id is an identifier like you have one as a primary key in your database, it should be unique (at least on that page you're on).

So I would do:

<% Category.select { |category| category.gender == 'girl' }.each do |category| %>
  <img id="choice-<%= category.id -%>" src= <%= category.image %> class="choice new" />
<% end %>

And the modified JS might look like this:

$("img.choice").click(function() {
  $(this).toggleClass("new").toggleClass("new1");
});

Remember that this is both untested and straight from my brain.

edit
For sake of simplicity, I'd also add a scope to your model, like this:

class Category < ActiveRecord::Base
  scope :female, where('gender = ?', 'female'), :order => :name # or some other ordering
end

So you can do this

<% Category.female.each do |category| %>
  [snip]
<% end %>

And your logic is a bit split out into your model, where it should belong IMHO.