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 コードを配置する必要があります。

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 であるタグが複数あることが原因です。Youridは、データベースの主キーとして持っているような識別子です。一意である必要があります (少なくとも、現在のページでは)。

だから私はするだろう：

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

そして、ロジックはモデルに少し分割されており、IMHO に属している必要があります。

于 2012-09-19T05:54:07.687 に答える