使用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... 
       } 
      }); 
     } 
    }); 
});