ajax-метод jQuery, использующий обратный вызов для обновления класса элементов

Question

Я хочу запустить функцию при нажатии на изображение, и эта функция получит URL-адрес, передавая ему параметр, а затем обновит класс содержащего элемента div значением, полученным из URL-адреса.

Может кто-нибудь помочь мне с кодом для этого?

Моя модель выглядит так:

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

Мой URL-адрес http://www.example.com/ajax/image.aspx?className=c1.

Итак, я хочу перейти по этому URL-адресу с помощью ajax-запроса, передав ему текущее имя класса, а затем он вернет, например, c2. Затем я обновляю класс div до c2, используя обратный вызов.

Answer 1

Это предполагает, что 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 2

Это при условии, что вы возвращаете только обычный текст из вашего сервиса. Может быть полезно включить образец формата возвращаемого контента в ваш вопрос. Я также не уверен, нужна ли вам функция 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 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;
  });
});