javascript - 使用链接 onClick() 切换传递给函数的值以对数据库结果顺序 ASC 或 DESC 进行排序

Question

我有一个 register.php 页面，它从数据库中提取数据。我的 php 页面上列出了结果，并且我创建了列标题的链接，用于对列进行排序。

链接看起来像这样

<div class='col-sm-12 day-heading'>
    <div class="row">
    <div class="col-sm-2"><a id="student_forename" onClick="showUser('student_forename','ASC')">Forename</a></div>
    <div class="col-sm-2"><a id="student_surname" onClick="showUser('student_surname','ASC')">Surname</a></div>
    <div class="col-sm-2"><a id="club" onClick="showUser('club','ASC')">Club</a></div>
    <div class="col-sm-3"><a id="student_instructor" onClick="showUser('student_instructor','ASC')">Instructor</a></div>
    <div class="col-sm-2"><a id="date_awarded" onClick="showUser('date_awarded','ASC')">Date</a></div>
    <div class="col-sm-1"><a id="student_age" onClick="showUser('student_age','ASC')">Age</a></div>         
</div>

showUser函数是

<script type="text/javascript"> 
function showUser(test, order) 
{ 
var users = document.getElementById('instructor').value;
var sex = document.getElementById('club').value
//var sort = document.getElementById('sortby').value;
var sort = test;

const but = document.getElementById(test);
if(but.getAttribute("onClick") === "showUser(test,'DESC')") 
{
    but.setAttribute("onClick","showUser(test,'ASC')");
}
else
{
    but.setAttribute("onClick","showUser(test,'DESC')");
}


var order = order;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","ajaxcall.php?student_instructor="+users+"&club="+sex+"&sortby="+sort+"&orderby="+order,true);
xmlhttp.send();
}

我认为问题在于尝试使用传递给其中函数的变量值。例如这一行

const but = document.getElementById(test);

应将 test 替换为从 onClick 链接传递的值

const but = document.getElementById(student_forename);

但是我在上面的代码中正确使用了测试吗？

同样的

if(but.getAttribute("onClick") === "showUser(test,'DESC')")

test 应替换为“test”的值，而不是设置为 test。

希望这是有道理的:)

Answer 1

肮脏的方法:您可以向您的标签添加一个类
初始类=“asc”，当单击时，检查类是否存在并设置“let order = asc”并从标签中删除类
下一步单击检查类是否存在，如果不存在，则设置“let order= desc”并添加 class="asc"。
你可以轻松切换类和变量
在这种情况下，您不必将订单参数传递给您的函数

您还可以切换 onClick 功能:

<a onClick="showUser('student_forename','ASC')">Forename</a>

<a onClick="showUser('student_forename','DESC')">Forename</a>

使用JS
你可以写这样的东西:

<button id="but" class="ASC" onClick="showUser('student_forename','DESC')">BUTTON
</button>
<script>
    function showUser(test, order)
    {
        const but = document.getElementById('but');
        if(but.getAttribute("onClick") === "showUser('student_forename','DESC')") 
        {
            but.setAttribute("onClick","showUser('student_forename','ASC')");
        }
        else
        {
            but.setAttribute("onClick","showUser('student_forename','DESC')");
        }
        order = order;
        test = test;
        console.log(`order= ${order}`);
        console.log(`test= ${test}`);

    }
</script>

以及稍后在函数体中做任何你想做的事:)
我添加了 2 个 console.log 来检查我是否将值传递给函数