Обработка заголовка таблицы

Question

Я использую это в сочетании с плагином tableorter, моя цель - иметь пустой атрибут класса в любом столбце, который не сортируется, т.е. когда я щелкаю один столбец, атрибуты класса в других удаляются.

У меня есть таблица с целой кучей заголовков, по сути, я хочу иметь возможность, когда я нажимаю на заголовок таблицы, я хочу, чтобы все другие таблицы удалили свой класс css, но я нажатие должно переключаться между двумя классами CSS. Я использую тег rel в теге привязки в содержимом заголовка, я делаю это потому, что мы используем XHTML Strict, и rel нельзя определить в самом теге заголовка таблицы. Мой код выглядит следующим образом:

$(function() {
     $("a[rel='Header']").click(function () {

         $("a[rel='Header']").each(function() {
            if($(this).attr("class")=="sort-up"){$(this).removeClass("sort-up");}
            if($(this).attr("class")=="sort-down"){$(this).removeClass("sort-down");}
        })

         if($(this).attr("class")==""){$(this).addClass("sort-up");}
            $(this).toggleClass("sort-down")
            });      
});

Я предполагаю, что это следует сделать, как только щелкнет заголовок, циклически перебирать каждый заголовок, если он содержит атрибут класса «сортировка», удалите его; если он содержит атрибут класса «sort-down», удалите его. Затем для заголовка, по которому щелкают в данный момент, добавьте атрибут класса «sort-up» и переключитесь между атрибутом «sort-down». Моя проблема заключается в том, что когда я нажимаю на один заголовок, если он использует класс «сортировки», представленный в заголовке стрелкой вниз (/), то я иду и нажимаю на другой заголовок в другом столбце, не удаляется. Однако он удалит класс «сортировки» (^).
Вот список моего заголовка в XHTML:

<thead>
            <tr>
                <th><a rel = "Header" href="#" class="">Title</a></th>
                <th><a rel = "Header" href="#" class="">Instructor</a></th>
                <th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" class="">Date</a></th>
                <th class="{sorter: false}">Start/End</th>
                <th><a rel = "Header" href="#" class="">Seats Available</a></th>
                <th><a rel = "Header" href="#" class="">Enrolled</a></th>
                <th><a rel = "Header" href="#" class="">Pre-Requisites</a></th>
                <th class="{sorter: false}">Workshop Actions</th>
            </tr>
        </thead>

ОБНОВЛЕНО изменениями, рекомендованными воском, глупая ошибка, все работает, я не обращал внимания на синтаксис hasClass. Благодаря.

$(function() {
     $("a[rel='Header']").click(function () {

         $("a[rel='Header']").each(function() {
            if($(this).hasClass("sort-up")){$(this).removeClass("sort-up");}
            if($(this).hasClass("sort-down")){$(this).removeClass("sort-down");}
        })

         if($(this).hasClass("")){$(this).addClass("sort-up");}
             if ($(this).hasClass("sort-up")) { 
                    $(this).removeClass("sort-up").addClass("sort-down"); 
                } else {
                    $(this).removeClass("sort-down").addClass("sort-up");
                }
            if($(this).attr("title") == "Sort column in ascending order"){
                $(this).attr({title : "Sort column in descending order"});}
            else {$(this).attr({title : "Sort column in ascending order"});} 
            });      
});

Answer 1

Попробуйте:

$(function() {
  $("a[rel='Header']").click(function () {
    // store the header and this for later use
    var $thead = $(this).parents().filter("thead").slice(0,1);
    var $this = $(this);

    // if we were sort-up - we become sort-down - otherwise we become sort-up
    if ($this.hasClass('sort-up')) { 
      $this.removeClass('sort-up').addClass('sort-down');
    } else {
      $this.removeClass('sort-down').addClass('sort-up');
    }

    // all headers except the one we clicked on - remove sort classes
    $("a[rel='Header']",$thead).not($this[0]).each(function() {
      $(this).removeClass('sort-up').removeClass('sort-down');
    });

    // set link titles based on current class
    $("a[rel='Header']", $thead).each(function() {
      if ($(this).hasClass('sort-up'))
      {
        $(this).attr('title', 'Sort column in descending order');
      } else {
        $(this).attr('title', 'Sort column in ascending order');
      }
    });
    // end click function
  });
});

Answer 2

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

if($(this).attr("class")=="sort-up")

ни

if($(this).attr("class")=="sort-down")

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

Я предлагаю пару изменений. Вместо использования

if($(this).attr("class")=="sort-up")

вы можете использовать,

if ($(this).hasClass("sort-up"))

, что все равно будет верно, если есть и другие классы. Кроме того, вы не можете использовать toggleClass в этом случае. Вместо этого используйте что-то вроде

if ($(this).hasClass("sort-up")) { 
    $(this).removeClass("sort-up").addClass("sort-down"); 
} else {
    $(this).removeClass("sort-down").addClass("sort-up");
}

, который должен дать якору класс сортировки при первом щелчке, а затем переключаться между ними сортировкой и сортировкой при последующих щелчках.