Изменить фон с помощью Javascript - AJAX - jQuery

Question

У меня есть таблица, как показано ниже;

<table style="width: 100%; border: solid 1px #666600; min-width: 800px" cellpadding="0" cellspacing="0">
<tr>
<td id="aaa">&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td id="bbb">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Я использую jquery ajax, и у меня есть скрипт, как показано ниже;

$(document).ready( function() {
var i = 1;
$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i,
  dataType: 'json',
  cache: false,
  success: function(result) {
    $('.title').each(function(index){
      values = result[index].split('*');
      indexa = values[0];
      indexb = values[1];
      if((result[index])){
        $(this).html(indexb);
      }else{
        $(this).html(" ");
      }
    });
  },
  });
});

Файл php вернет ["data1*abc","data2*abc","data3*abc","data4*abc","data5*abc","data6*abc"] для i = 1, ["data7*abc","data8*abc","data9*abc","data10*abc","data11*abc","data12*abc"] для i = 2 и т. Д. И т. Д. Текст в class="title" изменяется соответственно по отношению к данным, как abc или что-то еще. .

Вы можете видеть еще одну ячейку над каждой ячейкой заголовка, имеющую class="content". У меня есть php-файл ajax2.php, который будет возвращать имя изображения относительно $_POST["data1"] и $_POST["data2"]. Часть $_POST["data1"] должна иметь значение indexa, а часть $_POST["data2"] должна иметь значение indexb из javascript для каждого запроса ajax. Изображения помещаются в папку images, и данные, возвращаемые php-файлом, будут иметь размер image_name.extension.

Короче говоря, я хочу изменить фоновое изображение ячейки содержимого над ячейкой заголовка, чтобы оно изменялось при изменении данных / текста в соответствующей ячейке заголовка. Кто-нибудь подскажет, как сделать запрос AJAX и изменить фоновое изображение (изменить URL фонового изображения).

Я думаю, что это будет что-то вроде;

$(.content).css({ 'background-image':'url(images/' + imagename });

Вы можете увидеть мою скрипку здесь

Заранее спасибо ..

Answer 1

Я решил это путем;

$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i + '&dir=' + cat,
  dataType: 'json',
  cache: false,
  success: function(result) {
    var $titles = $row.next().next().children('.title');
    var $content = $row.next().children('.content');
    var $flag = $content.children('.flag');
    $('.title').each(function(index){
      if(result[index]){
        var values = result[index].split('*'),
        indexa = values[0],
        indexb = values[1];
        $titles.eq(index).html(indexa);
        $flag.eq(index).html(indexb);
        $.ajax({
                type: 'POST',
                url: 'ajax.php?strip=1',
                data: {
                  filename: Array(indexb, cat, indexa)
                },
                cache: false,
                success: function(result2) {
                  $content.eq(index).css({ 'background-image':'url(images/' + result2 + ')' });
                },
            });
      }else{
        $titles.eq(index).addClass("null");
        $content.eq(index).css({ 'background-image':'url()' });
      }
    });
  },
});

Answer 2

Я бы рекомендовал отправлять путь к изображению в первом запросе, но, возможно, это невозможно, поэтому вот двойной запрос ajax для установки фоновых изображений:

$(document).ready( function() {
    var i = 1;
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'id=' + i,
        dataType: 'json',
        cache: false,
        success: function(result) {
            $('.title').each(function(index){

                if (result[index]) {
                    // you need to set these local variables only if above is true
                    var values = result[index].split('*'),
                        indexa = values[0],
                        indexb = values[1];

                    $(this).html(indexb);

                    $.ajax({
                        type: 'POST',
                        url: 'ajax.php',
                        // You set your post parameters for this query
                        data: 'data1=' + indexa + '&data2=' + indexb,
                        dataType: 'json',
                        cache: false,
                        success: function(result) {
                            // Here result will be your image path
                            // You index the content with the index of title
                            $(".content").eq(index).css("background","url(images/" + result + ")");
                        }
                    });

                } else {
                    $(this).html(" ");
                    // You may reset your background image here...
                }
            });
        }
    });
});