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 和 Prototype 还比较陌生，我无法自己提出这个问题，所以我不得不问：有没有办法获得以前产品的类（“奇数”或“偶数”）并相应地为新插入的产品添加类？

我当前的 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”的产品，然后对于每个具有类产品的后续元素，切换奇数类和偶数类（如果存在则删除它，如果不存在则添加它）。

于 2010-12-08T10:41:46.070 回答
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 回答
0

如果我这样做，如果我可以依赖每一行是一个固定的高度，我可能会使用条纹背景图像。这不允许与背景不同的前景色或任何 CSS 属性。不过，这将是非常可靠的。

于 2010-12-08T13:03:09.850 回答