0
私はテーブルソートに使用しているアイコンを切り替えるためにJQuery/Javascriptを少し使用しようとしています。私はすべての要素を隠すことができますが、特に隠す/表示するクラスをターゲットにするのは少し面倒です。例えばJQueryを使用してアイコンクラスを切り替える
これらは
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
<th>Cust Name <i id='col2' class='fa fa-sort'></i></th>
<th>Cust ID <i id='col3' class='fa fa-sort'></i></th>
<th>Doc Date <i id='col4' class='fa fa-sort'></i></th>
<th>Upload Date <i id='col5' class='fa fa-sort'></i></th>
<th>Path</th>
は、私が特にやりたいどのようなHTMLの私の表の見出しは、例えばCOL1などの要素IDをターゲットとだけこれらの3の間クリックでクラス名を切り替えているありますどのクラスがその時点で表示されているかに応じてクラスを選択します。
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
私は通常、次の三つのクラス間のスイッチングされます。
これは典型的な例です。私が発見した
- FA FA-ソート
- FA FA-ソートASC
- FA FA-ソート-DESC
SCRIPT 任意のチュートリアルでは、唯一の要素IDをターゲットにするように見えます。私はこのようなものを試しましたが、うまくいきません。これに関するすべての指針は非常に高く評価されます。
$(document).ready(function(){
$("#col1").click(function(){
$(".fa fa-sort").hide();
$(".fa fa-sort-asc").show();
});
$("#col2").click(function(){
$(".fa fa-sort-asc").hide();
$(".fa fa-sort-desc").show();
});
$("#col3").click(function(){
$(".fa fa-sort-desc").hide();
$(".fa fa-sort").show();
});
});
Gの提案を見た後、私は、コードの変更は、しかし、それは動作して表示されませんでしたします。私はテストページのコードを追加しますが、フォーマットバグは許してください。
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<!-- CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style>
table
{
width: 90%;
margin: auto;margin-top: 20px;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #a0a0a0;
border-radius: 25px;
background-color: transparent;
}
.table
{
width: 90%;
margin-right: 5%;
margin-bottom: 20px;
margin-left: 5%;
}
th
{
padding: 10px;color: #fff;
background-color: #003466;
}
#col1, #col2, #col3, #col4, #col5
{
cursor:pointer;
}
tr
{
padding: 10px;
}
tr:nth-child(odd)
{
background-color: #fff;
}
tr:nth-child(even)
{
background-color: #efefef;
}
td
{
padding: 10px; text-align: center;
}
</style>
<script>
$("#col1").click(function() {
if($(this).hasClass('fa-sort')){
$(this).removeClass('fa-sort').addClass('fa-sort-asc');
return;
}
if($(this).hasClass('fa-sort-asc')){
$(this).removeClass('fa-sort-asc').addClass('fa-sort-desc');
return;
}
if($(this).hasClass('fa-sort-desc')){
$(this).removeClass('fa-sort-desc').addClass('fa-sort');
return;
}
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Order No <i id='col1' class='fa fa-sort'></i></th>
<th>Cust Name <i id='col2' class='fa fa-sort'></i></th>
<th>Cust ID <i id='col3' class='fa fa-sort'></i></th>
<th>Doc Date <i id='col4' class='fa fa-sort'></i></th>
<th>Upload Date <i id='col5' class='fa fa-sort'></i></th>
<th>Path</th>
</tr>
</thead>
</table>
</body>
</html>
あなたはaready付属のクラスに応じて、あなたのcol1-3にクラスを添付する。 jQueryの.class（）を使用して、特定のクラスの要素を見つけて、そのクラスを.addClass（）またはremoveClass（）することができます。 – Otterbein
こんにちは、ありがとうございました。あなたは正しかった、それはまさに私が達成したいと思っていたものです。しかし、私がスクリプトに貼り付けたとき、コードはまだ私のために発射していませんでした。私はちょうど別の更新があったかもしれない、おそらくこれもあなたでした。私はページ全体を表示するためにスレッドを修正しました。 私はすべての要素がうまく機能していることを確認するためにi要素を隠すテストを実行しました。エラーは発生せず、うまくいきました。 – Nick
@ galeaspabloが正しいコードをくれました。彼はまた、別々の機能を書くように言及しています。これは最高のクリーンなソリューションになります。あなたは現在のクラスを渡し、次のクラスを返すことができます。 – Otterbein