javascript - AJAX 调用并在单击时设置事件类

Question

这个问题已经有答案了:

Multiple divs with the same id invalid? (3 个回答)

已关闭 7 年前。

我试图在单击列表项以过滤显示的内容时同时进行 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。有没有办法可以将两者结合起来，让它们同时运行？

Answer 1

是的，您可以:

1. 稍微更改一下标记，将 li 元素传递给事件处理程序，删除重复的 ID:

   <li class="active" onclick="showRes(this)" value="1" >Tennis</li>
   <li onclick="showRes(this)" value="2">Soccer</li> 
   

2. 在同一处理程序中调用 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);      
   }
   

3. 稍微简化一下 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');                     
   }
   

4. 从文档就绪处理程序中删除此:$(".links li").click(make_button_active);。

没有ajax的演示:Fiddle