Question

当用户点击排序图标时，我按名字排序用户列表。但是，我注意到有时我单击排序图标，图标被切换，但是数据没有排序。例如，我点击它10次，当数据没有排序但图标改变时可能有3次。这里的任何帮助将不胜感激。

html代码的部分内容。

import java.io.*;
import java.util.*;
public class Account
{
    public static String  accountInput;
    public static boolean inSystem      = true;
    public static boolean displayLogIn  = true;
    public static boolean managerLogIn  = false;
    public static Scanner userInput     = new Scanner(System.in);
    public static File stockFile        = new File("Stock.txt");
    public static File employeesFile    = new File("Employees.txt");
    public static File transactionsFile = new File("Transactions.txt");
    public static void main(String[] args) throws IOException
    {
        String[] contents;
        System.out.println("\tWorking Files");
        System.out.println("-------------------------------------------");
        System.out.println("Stock File:\t\tStock.txt\nEmployee File:\t\tEmployees.txt\nTransactions File:\tTransactions.txt\n\n");
        Scanner readEmployeesFile = new Scanner(employeesFile);
        while(inSystem)
        {
            while(displayLogIn)
            {
                System.out.print("Enter Employee ID(i.e E1)\tEnter Q to Quit Program.\nEnter here: ");
                accountInput = userInput.nextLine();

                while(readEmployeesFile.hasNextLine())
                {
                    contents = readEmployeesFile.nextLine().split(",");
                    if(contents[0].equals(accountInput) & contents[1].equals("Manager"))
                    {
                        displayLogIn = false;
                        System.out.print("Valid MGR ID");
                        inSystem     = false;
                    }
                    else if(contents[0].equals(accountInput) & contents[1].equals("Assistant"))
                    {
                        displayLogIn = false;
                        System.out.print("Valid AST ID");
                        inSystem     = false;
                    }
                    else if(accountInput.equals("Q"))
                    {
                        displayLogIn = false;
                        inSystem     = false;
                    }
                }
            }
        }
    }
}

处理替换按钮并提交表单的功能。

  <div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
<a href="#" data-action="POST"> First Name</a> 
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc"></i></a></div>

Answer 1

if块和else块中的以下行是否相同？

$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');

Answer 2

尝试这样

$('a#sortName').on('click', function (e) {
    e.preventDefault();
    // Setting the current clicked icon into a variable.
    var findSortIcon = $(this).find('#sortIcon');
    if (findSortIcon.hasClass('fa-sort-alpha-desc')) {
        $('#searchVal').val('asc');
        //$('form').submit(); - We are sending the submit anytime whenever the button is 		clicked
        findSortIcon.removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
    } else {
        $('#searchVal').val('desc');
        //var myVal = $('#searchVal').val(); - no need for this (You dont use it anyway)
        // $('form').submit(); - same in here
        findSortIcon.removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
    }
    // Whether its true or false submit it!
    $('form').submit();
    
    
   	// Extra stuff to check changing directly
    var attr = findSortIcon.attr("class");
    $('#show-class').html(attr + " for " + $(this).text())
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
  <a href="#" data-action="POST"> First Name</a> 
  <a id="sortName" href="#" data-sort="SORT">
    <i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
      ICON
    </i>
  </a>
</div>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
  <a href="#" data-action="POST"> First Name2</a> 
  <a id="sortName" href="#" data-sort="SORT"> 
    <i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
      ICON2
    </i>
  </a>
</div>

<div id="show-class"></div>

Answer 3

请尝试使用此代码：

$('#sortName').on('click', function (e) {
     e.preventDefault();
     if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
         $(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
         $('#searchVal').val('asc');
     } else {
         $(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
         $('#searchVal').val('desc');
     }
     $('form').submit();
 });

Answer 4

我更改了代码以查看隐藏字段是否为空。然后，我根据这个决定做出了决定。新的JQuery代码如下所示，到目前为止它运行良好。

 $('#sortName').on('click', function (e) {
             e.preventDefault();
             var testVal = $('#searchVal').val();
             if (testVal === 'desc') {
                 $('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
                 $('#searchVal').val('asc');
             } else {
                 $('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
                 $('#searchVal').val('desc');
             }
             $('form').submit();
         });

JQuery Click Function随机停止工作

4 个答案: