Question

我想在单击图像时触发一个函数，该函数将点击一个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。

Answer 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);
  });
});

Answer 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);
    }
  });
});

Answer 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;
  });
});

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

3 个答案: