Question

我正在尝试使用一些JQuery / Javascript来切换我用于表格排序的图标。我可以隐藏所有i元素，但是在专门针对类来隐藏/显示时遇到了一些麻烦。

例如，这些是我在HTML格式的表格标题

  <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等。然后根据当时显示的类，在这三个类之间单击时切换类名。

这是一个典型的例子：

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

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

fa fa-sort
fa fa-sort-asc
fa fa-sort-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 &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

根据最后一堂课，切换到下一堂课。请注意，如果没有“返回”，则三个ifs将为真。

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

你应该创建一个函数，如果你要在很多类之间切换（我会这样做5或者更多）。但在你的特殊情况下，这很好用。

Answer 2

基于galeaspablo的答案：

＆＃13;

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

＆＃13;

* {
  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';
}

＆＃13;

<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>

＆＃13;

使用JQuery在图标类之间切换

2 个答案: