使用JQuery在图标类之间切换

我正在尝试使用一点JQuery/Javascript来切换图表我正在使用的表格排序。我可以隐藏所有我的元素，但是我有一些麻烦，特别是针对类隐藏/显示。使用JQuery在图标类之间切换

例如，这些都在我的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等，然后只开关类名上点击这3间课程取决于当时显示哪个课程。

这是一个典型的例子：

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

我通常将下面三个等级之间切换。

发发排序
发FA-排序ASC
发FA-排序倒序

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>

来源

2016-06-01 Nick

如果我理解正确的，你那么想要根据AREADY附类的类附加到您的col1-3。您可以使用jQuery中的.class（）来查找具有某个类的元素，然后使用.addClass（）或removeClass（）类。 – Otterbein

嗨，谢谢你的回复。你是对的，那正是我希望达到的。但是当我粘贴脚本时，代码仍然没有为我开火。我刚刚进行了另一次更新，也许这也是你。我修改了线程以显示整个页面。我跑了一个测试，只是隐藏我的元素来检查一切都很好，我没有犯错误，它工作正常。 – Nick

@galeaspablo给了你正确的代码。他还提到要写一个独立的函数。这将是最好和最干净的解决方案。你可以通过你当前的课程，并返回下一课。 – Otterbein

基于galeaspablo的回答是：

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

来源

2016-06-01 12:44:47

只要切换到下一个班级，具体取决于最后一堂课。请注意，如果没有“返回”，那么三个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; 
    } 
});

您应该创建一个功能，如果你曾经打算有很多类之间切换（我会为5个或更多这样做）。但在你的具体情况下，这工作得很好。

来源

2016-06-01 11:09:34 galeaspablo

使用JQuery在图标类之间切换

回答

相关问题