0

この方法を使用してゼブラストライプが実現されている製品の簡単なリストがありますcycle。

ここに製品の部分があります：

<tr class="product <%= cycle 'odd', 'even' %>">
  <td><%= product.name %></td>
  <td><%= product.price %></td>
  <td><%= product.percentage %></td>
  <td><%= link_to "Show", product %></td>
  <td><%= link_to "Edit", edit_product_path(product), :remote => true %></td>
  <td><%= link_to "Destroy", product, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td>
</tr>

ただし、別の製品を動的に挿入すると、サイクル メソッドは最初のクラス (この場合は「奇数」クラス) を論理的に選択するため、次のリロードまでストライピングが中断されます。製品全体を動的にリロードしても機能しますが。このメソッドはやや汚れているように見え、ページネーションを台無しにする可能性があります。私はまだ JavaScript とプロトタイプに比較的慣れていないので、自分でこれを思い付くことができないので、質問する必要があります: 以前の製品のクラス (「奇数」または「偶数」) を取得する方法はありますか?それに応じて、新しく挿入された製品にクラスを追加しますか?

パーシャルを挿入するために使用される現在のUJS：

Modalbox.hide();

function insertProduct() {
   $('products').insert( { top: "<%= escape_javascript(render @product) %>" } );
   $$('.product').first().highlight(); 
}

insertProduct.delay(0.8);

どんな助けでも大歓迎です。

前もって感謝します。

4

4 に答える 4

1

odd要素を挿入したら、すべてのクラスとを削除する必要がありますeven:

$('tr.product').removeClass('odd even');

次に、クラスを再度追加する必要があります。

$('tr.product:even').addClass('even');
$('tr.product:odd').addClass('odd');

したがって、コードは次のようになります。

[...]
$$('.product').first().highlight(); 
$('tr.product').removeClass('odd even');
$('tr.product:even').addClass('even');
$('tr.product:odd').addClass('odd');
}
于 2010-12-08T10:20:04.883 に答える
0

jQueryでは、次のようにします。

$('#product-<%= @product.id %> ~ .product').each(function(index) {
  $(this).toggleClass('odd');
  $(this).toggleClass('even');
});

セレクターによると、IDが「product-XX」の製品を検索し、クラスproductを持つ後続のすべての要素について、クラスの奇数と偶数を切り替えます（存在する場合は削除し、存在しない場合は追加します）。

于 2010-12-08T10:41:46.070 に答える
0

これを行っていて、各行の高さが固定されていることに依存できる場合は、代わりに縞模様の背景画像を使用するでしょう。これは、背景とは異なる前景色や CSS プロパティを許可しません。それでも信頼性は高いでしょう。

于 2010-12-08T13:03:09.850 に答える
0

Ionut Staicu は本質的に正しいですが、プロトタイプであることを忘れています。最終的な答えは次のとおりです。

$$('.product').invoke('removeClassName', 'odd')
              .invoke('removeClassName', 'even')
              .first().highlight(); 
$$('.product:even').invoke('addClassName', 'even');
$$('.product:odd').invoke('addClassName', 'odd');
于 2010-12-08T12:48:01.050 に答える