javascript - 使用链接 onClick() 切换传递给函数的值以对数据库结果顺序 ASC 或 DESC 进行排序
问题描述
我有一个 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。
希望这是有道理的:)
解决方案
肮脏的方法:您可以将一个类添加到您的标签
initialy class="asc" 并单击时检查类是否存在并设置“let order= asc”并从标签中删除类
接下来单击检查类是否存在,如果不存在,请设置“让 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来检查我是否得到传递给函数的值
推荐阅读
- lucene - Archiva 存储库没有出现并给出异常 503
- c# - C# 103 错误。当前上下文中不存在名称“预览”
- r - 如何将我的简单数据框转换为 R 中的发布样式表?
- javascript - 如何将我的 else/if 返回值放在带有用户提示值的网页上
- c# - Ajax 发布两次 ASP NET CORE MVC
- android - --prod 使用 Android 工作室中的 Ionic/Capacitor 应用程序构建
- php - 我希望将指定文本的溢出转移到另一个标签
- azure-media-services - Azure 媒体服务 - 下载暂时性错误
- jenkins - 如何从 Jenkins 更新选项卡中获取“警告”
- javascript - Vue.js 中的单例组件