На этом шаге мы рассмотрим еще несколько усовершенствований программного кода.

    Далее требуется обеспечить визуальную обратную связь. Нам необходимо скрыть строку, где только что был выполнен щелчок, чтобы сделать удаление элемента из корзины более наглядным, как показано на рисунке 1.

     $deleteButton = $('<img />').attr({
       'width': '16',
       'height': '16',
       'src': 'images/cross.png',
       'alt': 'Удалить из корзины',
       'title': 'Удалить из корзины',
       'class': 'clickable'
     }).click(function() {
       $(this).parents('tr').find('td.quantity input')
         .val(0).trigger('change')
       .end().hide();
     });

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

    Удаление строки из таблицы повлекло нарушение чередования окраски строк. Чтобы исправить этот недостаток, мы переместим реализацию окраски строк в отдельную функцию, чтобы потом ее можно было вызвать еще раз. В то же время нам необходимо модифицировать программный код, чтобы он игнорировал скрытые строки. К сожалению, даже если отфильтровать все скрытые строки, мы все равно не сможем использовать селектор :nth-child(even), потому что он будет применять класс alt ко всем видимым строкам, которые являются "четными" потомками своих родителей. Посмотрим, что произойдет, если задействовать следующую модификацию программного кода к таблице из четырех строк, в которой вторая строка скрыта:

    $('#cart tbody tr').removeClass('alt')
      .filter(':visible:odd').addClass('alt');

    Мы получим следующую разметку HTML (сокращено):

<tr> . . . </tr>
<tr style="display: none"> . . . </tr>
<tr> . . . </tr>
<tr class="alt"> . . . </tr>

    В таблице присутствуют три видимые строки, но только четвертая получила класс alt. To что нам нужно - это выражение селектора :visible:odd, так как он отберет каждую вторую строку уже после исключения скрытых строк из выбора (при этом будет автоматически учтен переход от селектора, начинающего отсчет с 1, к селектору, начинающему отсчет с 0). Как уже отмечалось, использование селектора :odd или :even может приводить к неожиданным результатам при наличии более одного элемента <tbody>, но в этом отношении у нас все в порядке. После замены выражения селектора наш программный код выглядит, как показано ниже:

  var stripe = function() {
    $('#cart tbody tr').removeClass('alt')
    .filter(':visible:odd').addClass('alt');
  };
  stripe();

    Теперь эту функцию можно вызвать еще раз после удаления строки:

  $('#cart tbody tr').each(function() {
     $deleteButton = $('<img />').attr({
       'width': '16',
       'height': '16',
       'src': 'images/cross.png',
       'alt': 'Удалить из корзины',
       'title': 'Удалить из корзины',
       'class': 'clickable'
     }).click(function() {
       $(this).parents('tr').find('td.quantity input')
         .val(0).trigger('change')
       .end().hide();
       stripe();
     });

    Теперь удаленная строка скрывается бесследно, как показано на рисунке 1.

Рис.1. Окончательная версия

    Этим завершается реализация еще одного усовершенствования с использованием библиотеки jQuery, которое полностью независимо от программного кода на стороне сервера. Для сервера вполне достаточно, чтобы пользователь ввел в поле значение 0, но для пользователя это отчетливо идентифицируемая операция удаления, отличная от операции изменения количества.

    На следующем шаге мы рассмотрим изменение информации с адресом доставки.

Предыдущий шаг Содержание Следующий шаг