表头操作

Question

我正在将这个与tablesorter插件结合使用，我的目标是在任何未排序的列中都有一个空的class属性，即当我单击一列时，其他列中的类属性将被删除。

我有一个包含大量标题的表，基本上我想要做的就是当我点击表标题时，我想要所有其他表删除它们的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-up”，则删除它;如果它包含类属性“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>

更新了由waxwing推荐的更改，愚蠢的错误，它的工作原理，我没有注意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

对我来说这是这样的：你点击一次，然后添加了排序类，因为类是空的。然后，由于以下行，还添加了排序类。所以现在你有一个同时进行排序和排序的单元格。点击另一个标题，

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

，也不

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

将为true，因此不会删除这些类。另一方面，如果你在锚点上单击两次，第一次它将添加两个类，第二次它将实际切换（删除）排序类。然后，当您单击另一列时，它会像预期的那样工作。

我建议做一些改变。

。而不是使用，

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");
}

应该在第一次点击时为锚点提供排序类，然后在它们之间进行切换，并在后续点击时进行排序。

Answer 2

尝试：

$(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
  });
});