jQuery ajax 方法使用回调更新元素类答案

【问题标题】：jQuery ajax method using a callback to update an elements classjQuery ajax 方法使用回调更新元素类
【发布时间】：2009-02-11 02:44:04
【问题描述】：

我想在单击图像时触发一个函数，该函数将访问一个 URL 并传递一个参数，然后使用我从 URL 中返回的值更新包含 div 的类。

有人可以帮我写代码吗？

我的 DOM 看起来像：

<div class="c1"><img src="/images/hello.jpg"/></div>

我的网址是http://www.example.com/ajax/image.aspx?className=c1。

所以我想使用 ajax 请求转到该 url，将当前类名传递给它，然后它将返回例如c2。然后我使用回调将 div 的类更新为c2。

【问题讨论】：

标签： jquery ajax callback

【解决方案1】：

这是假设您只从您的服务返回纯文本。在您的问题中包含返回内容格式的示例可能很有用。我也不确定你是否需要 removeClass 函数，但我还是添加了它。

$('c1 > img').click(function() {
  var img = $(this);
  $.get('http://www.example.com/ajax/image.aspx?className=c1', null, function(data){
    img.closest('div').removeClass('c1').addClass(data);
  });
});

【讨论】：

最近的添加使得遍历树更容易。

【解决方案2】：

这假设 div 一开始只有一个类。如果它有多个，您将需要做一些工作才能获得所需的课程。

$('img').click(function() {
  var $img = $(this);
  var $div = $(this).parent();
  var divClass = $div.attr('class');
  var url = 'http://www.example.com/ajax/image.aspx';

  $.ajax({
    'type' : 'get', // change if needed
    'dataType' : 'text', // data type you're expecting
    'data' : { 'className' : divClass },
    'url' : url,
    'success' : function(newClass) {
      $div.removeClass(divClass); // if needed
      $div.addClass(newClass);
    }
  });
});

【讨论】：

【解决方案3】：

我假设您希望在每次新点击（c1、c2、c3、...）时不断更新类？

var classname = 'c1';
$('div.' + classname + ' > img').click(function() {
  var div = $(this).closest('div');
  var url = 'http://www.example.com/ajax/image.aspx?className=' + classname;
  $.get(url, null, function(data){
    div.removeClass(classname).addClass(data);
    classname = data;
  });
});

此外，您可能希望对整个 div 而不仅仅是图像进行点击检查：

var classname = 'c1';
$('div.' + classname).click(function() {
  var div = $(this);
  var url = 'http://www.example.com/ajax/image.aspx?className=' + classname;
  $.get(url, null, function(data){
    div.removeClass(classname).addClass(data);
    classname = data;
  });
});

【讨论】：