我试图在单击列表项以过滤显示的内容时同时进行 AJAX 调用并设置事件类。 示例 html:
<li class="active" id='tag' onclick="showRes(this.value)" value="1" >Tennis</li>
<li id='tag' onclick="showRes(this.value)" value="2">Soccer</li>
我有AJAX功能:
function showRes(str) {
if (str == "") {
...
....
xmlhttp.open("GET","getres.php?q="+s_val+"&t="+t_val+"&c="+c_val,true);
xmlhttp.send();
}
}
以及设置事件类的点击函数:
var s_val;
var t_val;
var c_val;
var make_button_active = function()
{
var siblings =($(this).siblings());
siblings.each(function (index)
{
$(this).removeClass('active');
}
)
$(this).addClass('active');
s_val = $("#popular li.active").attr('value');
t_val = $("#locations li.active").attr('value');
c_val = $("#categories li.active").attr('value');
}
$(document).ready(
function()
{
$(".links li").click(make_button_active);
}
)
它可以工作,但需要单击两次才能触发 ajax。有没有办法可以将两者结合起来,让它们同时运行?
最佳答案
是的,您可以:
稍微更改一下标记,将
li
元素传递给事件处理程序,删除重复的 ID:<li class="active" onclick="showRes(this)" value="1" >Tennis</li> <li onclick="showRes(this)" value="2">Soccer</li>
在同一处理程序中调用
make_button_active
:function showRes(el) { // call ajax if (el.value == "") { ... ... xmlhttp.open("GET", "getres.php?q=" + s_val + "&t=" + t_val + "&c=" + c_val, true); xmlhttp.send(); } // call function make_button_active(el); }
稍微简化一下
make_button_active
功能:var make_button_active = function(el) { $(el).addClass('active').siblings().removeClass('active'); s_val = $("#popular li.active").attr('value'); t_val = $("#locations li.active").attr('value'); c_val = $("#categories li.active").attr('value'); }
从文档就绪处理程序中删除此:
$(".links li").click(make_button_active);
。
没有ajax的演示:Fiddle
关于javascript - AJAX 调用并在单击时设置事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34891452/