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上添加一个类，然后检查新类的has类而不是...

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和not成功中添加了类，因为ajax即使失败也会调用成功。你当然可以选择这样做。

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

1 个答案: