Rails - 各データベースエントリ内でjavascriptを実行する

Question

少し書くのは混乱しますが、これは初めてのことです。だから私はデータを表示するためにデータベースをループしているHTMLページを持っているだけでなく、いくつかの値をチェックし、それに応じて背景を変更するjavascriptスクリプトを持っていますが、問題は最初の要素に対してのみ起こるということです。私のコードの

ここで一部：

<% #prints the artists that match the search, prints all for empty search %> 
     <% @top100.each_slice(1) do |top100| %> 
      <div class="row"> 
       <% top100.each do |top100| %> 
        <div id = "arrow"> 
         <p>test</p> 
        </div> 
        <script> 
         var current = <%= top100.top100Current %> 
         var lastWeek = <%= top100.top100LastWeek %> 
         if(current < lastWeek) { 
          document.getElementById("arrow").style.backgroundImage = "url('http://www.clker.com/cliparts/i/5/z/3/G/y/red-arrow-down-th.png')"; 
         } 
         else { 
          document.getElementById("arrow").style.backgroundImage = "url('http://www.clker.com/cliparts/d/3/c/4/12065699181684813498pitr_green_single_arrows_set_3.svg.thumb.png')"; 
         } 
        </script> 
       <% end %> 
      </div> 
     <% end %> 

Answer 1

のdocument.getElementById（ "矢印"）のみ1 element.Yourページは "矢印" のIDを持つ複数の要素を持って返します。 Javascriptはクライアント側で実行されるため、スクリプトタグを複数回レンダリングしても問題ありません。

問題を解決するには、クラス「矢印」を使用してDocument.getElementsByClassName（）を使用します。使用のためにSEE。

レンダリングの最後に1つのスクリプトタグで十分です。

Answer 2

ここにあなたを乗り越える可能性のあることがいくつかあります。

まず、IDを選択しています。 IDはユニークであることを意図しています。あなたのスクリプトは、矢印付きの最初のIDを見つけて、そのスクリプトを適用します。 （ループの場合はインデックスに基づいて）一意のIDを作成するか、クラスを使用する

2番目：DOM要素を実際にループしているものはスクリプトには何もありません。あなたがjqueryに反対していないなら、私は代わりに100の親をターゲットにし、子供たちをループさせて毎回スクリプトを実行します。

第3：実際にはループ内にスクリプトを作成しているようです。あなたはすべての子供のためのスクリプトを作成する必要はありません、最後にDOMをループする1つのスクリプトを作成するほうが効率的です。

私は、このようなスクリプトを使用して、すべてのものをレンダリングしたい：

$('#parent').children('div').each(function() { 
    // "this" is the current element in the loop 
    // Assign style here 
}); 

代わりに、あなただけのレールループ内のクラス名を追加してからちょうどCSSを使用することができますか？