Question

我有一个包含10列的表头。在这些列中的每一列中都有一些文本和一个div。 div的目的是有一个箭头图像，指示表是按升序还是降序排序。

现在，当用户点击th时，我希望jQuery在这个内部的div中添加一个.headerSortUp类。这是我到目前为止所得到的：

HTML :(对于标题栏）

<table cellspacing="0" id="open-orders" class="enhanced tablesorter">
    <thead>
      <tr>
        <th class="persist essential"><a href="#" rel="Symbol"></a>Company 
        <div class="sorter"></div></th>
        <th class="hidden"><a href="#" rel="grade"></a>Stock<br class="rwd"/>Grade
        <div class="sorter"></div></th>
        <th class="essential"><a href="#" rel="price"></a>GTC<br class="rwd" />
          Price 
        <div class="sorter"></div></th>
        <th class="optional"><a href="#" rel="buy-date"></a>Buy<br class="rwd" />
          Date 
        <div class="sorter"></div></th>
        <th class="optional"><a href="#" rel="allocation"></a>Allocation
        <div class="sorter"></div></th>
        <th class="optional"><a href="#" rel="quantity"></a>Share<br class="rwd" />
          Quantity 
        <div class="sorter"></div></th>
        <th class="optional"><a href="#" rel="yield"></a>Yield 
        <div class="sorter"></div></th>
        <th class="optional"><a href="#" rel="ex-dividend"></a>Ex-<br class="rwd" />
          Dividend 
        <div class="sorter"></div></th>
        <th><a href="#" rel="cprice"></a>Current<br class="rwd" />
          Price 
        <div class="sorter"></div></th>
        <th><a href="#" rel="return"></a>Current<br class="rwd" />
          Return 
        <div class="sorter"></div></th>
        <th class="leftnote">Notes</th>
      </tr>
    </thead>

jQuery的：

$(document).ready(function(){
    $("#open-orders tr th").click(function(){
        $("#open-orders tr th").removeClass("headerSortUp");
        $(this).addClass("headerSortUp");
    });
});

CSS：

table.tablesorter thead tr th .sorter .headerSortUp {
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
table.tablesorter thead tr th .sorter .headerSortDown {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}

我不明白为什么我的jQuery没有将类添加到div中。有人能指出为什么我的jQuery不起作用吗？谢谢！

Answer 1

因为this中的$(this).addClass("headerSortUp");引用了点击的项目。在这种情况下，那是$("#open-orders tr th")，而不是div。

$("#open-orders tr th").click(function(){
    $("#open-orders").find(".headerSortUp").removeClass("headerSortUp");
    $(this).find('div').addClass("headerSortUp");
});

此外，您的CSS在这种情况下是错误的。您不希望.sorter之后的空格：

table.tablesorter thead tr th .sorter.headerSortUp {
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
table.tablesorter thead tr th .sorter.headerSortDown {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;

实际上，我怀疑是否需要具体。这是真正的慢选择器。 .headerSortUp {}可能已经足够了。如果需要，可以在左侧添加一个元素。

选项2 您也可以单独留下JS并更改CSS：

.headerSortUp .sorter{
    background-image: url("/wcmedia/asc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}
.headerSortDown  .sorter {
    background-image: url("/wcmedia/desc1.gif");
    background-repeat: no-repeat;
    background-position: left;
}

这就是说将这些样式应用于.sorter和.headerSortUp

中的任何.headerSortDown元素

Answer 2

这里的问题是你的CSS选择器;有了这个：

$（“＃open-orders tr th”）

您要将类名添加到th元素并使用CSS选择器：

table.tablesorter thead tr th .sorter .headerSortDown

您使用类headerSortDown inisde .sorter定位元素，您需要将CSS选择器更改为：

table.tablesorter thead tr th.headerSortUp .sorter  {
  background-image: url("/wcmedia/asc1.gif");
  background-repeat: no-repeat;
  background-position: left;
}
table.tablesorter thead tr th.headerSortDown  .sorter {
  background-image: url("/wcmedia/desc1.gif");
  background-repeat: no-repeat;
  background-position: left;
}

将th元素与该类名匹配。

请记住要使bg图像可见，您需要元素上的尺寸

单击时将一个类添加到div中

2 个答案: