Question

我正在尝试进行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();
        }
    }

用于设置活动类的click函数：

    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。有没有办法可以将两者结合起来，以便一次运行？

Answer 1

是的，你可以：

稍微更改标记，将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

AJAX调用并在点击时设置活动类

1 个答案: