如何在切换时避免重复的AJAX？

Question

我有以下的jQuery代码：

$('.button').click(function(e) { 
    e.preventDefault(); 

    var id = $(this).attr('id'); 
    var panel = $('#picpanel' + id); 
    var panelhtml = '<ol id="piclist' + id + '" class="piclist"></ol>'; 
    panel.html(panelhtml); 
    panel.slideToggle(200); 
    $(this).toggleClass('active'); 

    $.ajax({ 
    type: 'GET', 
    url: 'index.php', 
    data: 'id=' + id + '&submit=getpicture', 
    cache: false, 
    success: function(html) { 
     $('#piclist' + id).append(html); 
    } 
    }); 
}); 

基本上，图片从数据库在点击一个按钮读取。在点击按钮之前，显示所有图片的面板也被隐藏。当我点击按钮时，显示面板，图片被读取并显示;没有问题。

问题是，当我再次单击按钮时，我想隐藏面板。它可以隐藏，但似乎AJAX再次运行，这当然是不需要的。如何避免这种情况？

Answer 1

检查元素是否有活动类，只有在没有活动类时才运行。

if(!$(this).hasClass("active")) 
{ 
    $.ajax({ 
    type: 'GET', 
    url: 'index.php', 
    data: 'id=' + id + '&submit=getpicture', 
    cache: false, 
    success: function(html) { 
     $('#piclist' + id).append(html); 
    } 
    }); 
} 

此外，如果您想要的元素只AJAX运行一次，而不只是它是否有一个活跃的类，你可以在第一AJAX添加一个类，然后检查对新的类类，而不是..

if(!$(this).hasClass("fetched")) 
{ 
    $.ajax({ 
    type: 'GET', 
    url: 'index.php', 
    data: 'id=' + id + '&submit=getpicture', 
    cache: false, 
    success: function(html) { 
     $('#piclist' + id).append(html); 
    } 
    }); 
    $(this).addClass("fetched"); 
} 

btw我在if中添加类而不是成功，因为ajax即使失败也会调用成功。当然，你可以选择做它。