Динамическая вставка предметов портит полоску зебры - PullRequest
Новая
       11

Динамическая вставка предметов портит полоску зебры

0 голосов
/ 08 декабря 2010

У меня есть простой список продуктов, в которых чередование зебры достигается с помощью метода 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 ]

1 голос
/ 08 декабря 2010

После того, как вы вставили элементы, вам нужно удалить все классы 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');
}
0 голосов
/ 08 декабря 2010

Если бы я делал это, и если бы я мог полагаться на то, что каждая строка имеет фиксированную высоту, я бы вместо этого использовал полосатое фоновое изображение.Это не позволяет различать цвета переднего плана или какие-либо свойства CSS, чем фон.Тем не менее, это было бы очень надежно.

0 голосов
/ 08 декабря 2010

Ionut Staicu по сути прав, но забыл, что это Prototype. Окончательный ответ должен быть; 

$$('.product').invoke('removeClassName', 'odd')
              .invoke('removeClassName', 'even')
              .first().highlight(); 
$$('.product:even').invoke('addClassName', 'even');
$$('.product:odd').invoke('addClassName', 'odd');
0 голосов
/ 08 декабря 2010

В jQuery я делаю это так: 

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

Селектор говорит: найдите продукт с идентификатором "product-XX", затем для каждого следующего элемента, который имеет класс product, переключите класс odd идаже (удалите его, если он есть, и добавьте его, если его нет).

...