在<th>上添加一個類到div上點擊

我有一個包含10列的表頭。在這些列中的每一列中都有一些文本和一個div。 div的目的是讓一張箭頭的圖像指示表格是按升序還是降序進行排序。在<th>上添加一個類到div上點擊

現在，當用戶點擊該日，我想jQuery的一類.headerSortUp添加到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不工作？謝謝！

來源

2014-02-11 dante466

因爲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 {}可能就夠了。如果需要，可在左側添加一個元素。

OPTION 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應用這些樣式的任何.sorter元素和.headerSortDown

來源

2014-02-11 19:01:00 Will

正是我需要的尺寸需要！謝謝你的解釋。你是男人！我會在7分鐘內回答問題（我必須等很久才能接受它）。 – dante466

很高興幫助。 NB @ Danko的評論「記住讓bg圖像可見，你需要元素的尺寸」 – Will

這裏的問題是你的CSS選擇器;與此：

$（「＃開單TR日」）

您要添加的類名的th元素，並與你的CSS選擇器：

表。 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元素與類名。

記住，使背景圖片顯示你的元素

來源

2014-02-11 19:04:45 DaniP

在<th>上添加一個類到div上點擊

回答

相關問題