如何在 jquery ajax 成功函数中引用调用 dom 元素？

Posted 2023-05-08

【中文标题】如何在 jquery ajax 成功函数中引用调用 dom 元素？

【英文标题】：How do I reference the calling dom element in a jquery ajax success function?

【发布时间】：2010-09-14 07:31:11

【问题描述】：

如果基于该元素的 ajax 调用成功，我正在尝试修改该元素的类

<script type='text/javascript'>
$("#a.toggle").click(function(e)
    $.ajax(
        url: '/changeItem.php',
        dataType: 'json',
        type: 'POST',
        success: function(data,text)
            if(data.error=='')
            
                if($(this).hasClass('class1'))
                
                    $(this).removeClass('class1');
                    $(this).addClass('class2');
                
                else if($(this).hasClass('class2'))
                
                    $(this).removeClass('class2');
                    $(this).addClass('class1');
                
            
            else(alert(data.error));
           
    );
    return false;
);
</script>
<a class="toggle class1" title='toggle-this'>Item</a>

我对这个问题的理解是，在成功函数中 this 引用了 ajax 对象参数，而不是像在 click 函数的其他地方那样调用 dom 元素。那么，如何引用调用的 dom 元素并检查/添加/删除类？

【参考方案1】：

您可以将其存储在变量中。示例：

$("#a.toggle").click(function(e)

   var target = $(this);
   $.ajax(
      url: '/changeItem.php',
      dataType: 'json',
      type: 'POST',
      success: function(data,text)
      
         if(data.error=='')
         
            if(target.hasClass('class1'))
            
               target
                  .removeClass('class1')
                  .addClass('class2');
            
            else if(target.hasClass('class2'))
            
               target
                  .removeClass('class2')
                  .addClass('class1');
            
         
         else(alert(data.error));
             
   );
   return false;
);

【参考方案2】：

jQuery 将事件的目标以及有关它的一些其他信息传递给您的处理函数。有关更多信息，请参阅http://docs.jquery.com/Events_%28Guide%29。

在您的代码中，它会像 $(e.target) 一样被引用。

【参考方案3】：

最好设置ajax参数：context: this。示例：

    $.ajax(
    url: '/changeItem.php',
    dataType: 'json',
    type: 'POST',
    context: this,
    success: function(data,text)
        if(data.error=='')
        
            if($(this).hasClass('class1'))
            
                $(this).removeClass('class1');
                $(this).addClass('class2');
            
            else if($(this).hasClass('class2'))
            
                $(this).removeClass('class2');
                $(this).addClass('class1');
            
        
        else(alert(data.error));
       
);

【参考方案4】：

我知道它很旧，但您可以使用 click 函数中的 'e' 参数。