在 <the> 单击时将类添加到 div答案

【问题标题】：Adding a class onto a div on <th> click在 <the> 单击时将类添加到 div
【发布时间】：2018-08-13 02:37:04
【问题描述】：

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

现在，当用户单击 th 时，我希望 jQuery 将 .headerSortUp 类添加到 THAT th 内的 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 不起作用？谢谢！

【问题讨论】：

标签： javascript jquery css html-table

【解决方案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 元素

【讨论】：

正是我需要的！也谢谢你的解释..你是男人！我会在 7 分钟内排除答案（我必须等那么久才能接受它。）
很高兴它有帮助。 NB @Danko 的评论“记住要使 bg 图像可见，您需要元素上的尺寸”

【解决方案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 元素与该类名匹配。

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

【讨论】：