Question

我有一个简单的产品列表，其中使用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);

非常感谢任何帮助。

提前致谢。

Answer 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');
}

Answer 2

在jQuery中，我这样做：

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

选择器说：找到ID为“product-XX”的产品，然后对于每个具有类产品的后续元素，切换类奇数和偶数（如果它存在则将其删除，如果不存在则将其添加）。

Answer 3

Ionut Staicu基本上是对的，但已经忘记了它的原型。最终答案应该是;

$$('.product').invoke('removeClassName', 'odd')
              .invoke('removeClassName', 'even')
              .first().highlight(); 
$$('.product:even').invoke('addClassName', 'even');
$$('.product:odd').invoke('addClassName', 'odd');

Answer 4

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

动态项目插入搞乱了斑马条纹

4 个答案: