2

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

有人可以帮我写代码吗？

我的 DOM 看起来像：

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

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

因此，我想使用 ajax 请求访问该 url，并将当前类名传递给它，然后它将返回 eg c2。然后我将 div 的类更新为c2使用回调。

4

3 回答 3

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);
  });
});
于 2009-02-11T03:05:42.147 回答
1

This assumes that the div starts out with only one class. If it has more than one, you're going to need to do some work to get the class you're after.

$('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);
    }
  });
});
于 2009-02-11T23:00:17.080 回答
0

我假设您希望在每次新点击（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;
  });
});
于 2009-02-11T03:17:18.360 回答