0

我有一个复选框列表，其中包含关联的图像和标题作为标签。我运行一个each循环来提取复选框的数据。我只是希望在点击时突出显示图像。出于某种原因，我正在使用的 jQuery 切换脚本在循环中不起作用。

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>
4

2 回答 2

2

这是一个JSFiddle：

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

您需要将 JS 代码包装在 $(document).ready 中，以便注册事件：

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

理想情况下，您应该将 JS 代码放在 assets 中的适当文件中：

app/assets/javascripts/<controller_name>.js

如果它不存在，请创建它。如果它是一个 CoffeeScript 文件，你可以将它重命名为 .js，或者用 CoffeeScript 编写，如果那是你的事。

如果要将代码保留在视图文件中，则将其放在底部并将其包装

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

然后在关闭 body 标记之前放置以下内容</body>：

<%= yield :javascript %>

这样，您的 JS 代码将自动呈现在底部，而不是 HTML 中间。

于 2012-09-19T05:52:02.977 回答
0

也许原因是，在遍历您的循环之后，有多个<img id="choice" />标签是无效的 HTML。你id是一个标识符，就像你在数据库中有一个主键一样，它应该是唯一的（至少在你所在的那个页面上）。

所以我会这样做：

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

修改后的 JS 可能如下所示：

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

请记住，这是未经测试的，直接来自我的大脑。

编辑
为简单起见，我还将为您的模型添加一个范围，如下所示：

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

所以你可以这样做

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

而且你的逻辑有点分裂到你的模型中，它应该属于恕我直言。

于 2012-09-19T05:54:07.687 回答