我有一个 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。
希望这是有道理的:)
最佳答案
肮脏的方法:
您可以向您的标签添加一个类
初始类=“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 来检查我是否将值传递给函数
关于javascript - 使用链接 onClick() 切换传递给函数的值以对数据库结果顺序 ASC 或 DESC 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58485155/