javascript - 单击 将类添加到 div

Question

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

现在，当用户点击 th 时，我希望 jQuery 将 .headerSortUp 类添加到 THAT 内的 div 中。这是我目前得到的结果:

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).addClass("headerSortUp"); 中的 this 指的是被点击的元素。在这种情况下，它是 $("#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;
}

这是说将这些样式应用于 .headerSortUp 和 .headerSortDown 中的任何 .sorter 元素