使用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"]。对于每个ajax请求，$_POST["data1"]部分的值应为indexa，而$_POST["data2"]部分的值应为来自javascript的值indexb。图像放在图像文件夹中，php文件返回的数据将只有image_name.extension。

总之，我想更改标题单元格上方的内容单元格的背景图像，以更改相应标题单元格中的数据/文本更改时的背景图像。任何人告诉我如何做AJAX请求并更改背景图片（更改背景图片网址）。

我认为它会是这样的;

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

你可以看到我的小提琴提前here

谢谢..

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

我建议在第一个查询发送图片的路径，但也许这是不可能的，所以这里是双阿贾克斯要求设置背景图像太：

$(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... 
       } 
      }); 
     } 
    }); 
});