使用 JQuery 在图标类之间切换

Question

我正在尝试使用一些 JQuery / Javascript 在我用于 table 排序的图标之间切换。我可以隐藏所有 i 元素，但在专门针对 class 到 hide/show 时遇到了一些麻烦。

例如，这些是我在 HTML

中的 table 标题

  <th>Order No &nbsp; <i id='col1' class='fa fa-sort'></i></th>
  <th>Cust Name &nbsp; <i id='col2' class='fa fa-sort'></i></th>
  <th>Cust ID &nbsp; <i id='col3' class='fa fa-sort'></i></th>
  <th>Doc Date &nbsp; <i id='col4' class='fa fa-sort'></i></th>
  <th>Upload Date &nbsp; <i id='col5' class='fa fa-sort'></i></th>
  <th>Path</th>

我特别想做的是定位元素 ID，例如 col1 等。然后仅在单击时在这 3 个 class 之间切换 class 名称，具体取决于哪个 class 正在显示。

这是一个典型的例子：

<th>Order No <i id='col1' class='fa fa-sort'></i></th>

我通常会在以下三个 class 之间切换。

fa fa-sort
fa fa-sort-asc
fa fa-sort-desc

脚本我发现的任何教程似乎都只针对元素 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 &nbsp; <i id='col1' class='fa fa-sort'></i></th>
            <th>Cust Name &nbsp; <i id='col2' class='fa fa-sort'></i></th>
            <th>Cust ID &nbsp; <i id='col3' class='fa fa-sort'></i></th>
            <th>Doc Date &nbsp; <i id='col4' class='fa fa-sort'></i></th>
            <th>Upload Date &nbsp; <i id='col5' class='fa fa-sort'></i></th>
            <th>Path</th>
        </tr>
    </thead>
</table>
</body>
</html>

Answer 1

根据上一个class切换到下一个class即可。请注意，如果没有 "return"，三个 if 将为真。

$("#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;
  }
});

如果您要在许多 class 之间切换（我会为 5 次或更多次这样做），则您应该创建一个函数。但在您的特定情况下，这很好用。

Answer 2

基于的回答：

$(".fa").click(function() {

  var $current = $(this);
  var sortDefault = 'fa-sort';
  var sortAsc = 'fa-sort-asc';
  var sortDesc = 'fa-sort-desc';

  var isSortDefault = $current.hasClass(sortDefault);
  var isSortAsc = $current.hasClass(sortAsc);

  $current
    .toggleClass(sortDefault, !isSortDefault && !isSortAsc)
    .toggleClass(sortAsc, isSortDefault && !isSortAsc)
    .toggleClass(sortDesc, isSortAsc);
});

* {
  font-size: 18px;
  vertical-align: middle;
}
.fa {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  color: cornflowerblue;
}
.fa.fa-sort:after {
  content: 'sort_by_alpha';
}
.fa.fa-sort-asc:after {
  content: 'arrow_drop_down';
}
.fa.fa-sort-desc:after {
  content: 'arrow_drop_up';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Order No <i id='col1' class='fa fa-sort'></i>
Cust Name &nbsp; <i id='col2' class='fa fa-sort'></i>
Cust ID &nbsp; <i id='col3' class='fa fa-sort'></i>
Doc Date &nbsp; <i id='col4' class='fa fa-sort'></i>
Upload Date &nbsp; <i id='col5' class='fa fa-sort'></i>

使用 JQuery 在图标类之间切换

Using JQuery To Switch Between Icon Classes

javascript

sorting

jquery

icons

show-hide

使用 JQuery 在图标 类 之间切换

Using JQuery To Switch Between Icon Classes

javascript

sorting

jquery

icons

show-hide

使用 JQuery 在图标类之间切换