Question

我有一个jQuery脚本来改变关于ajax回调的背景图像，如下所示;

<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $cell1 = $('#res1');
      $cell2 = $('#res2');
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title1").html()
        },
        success: function(response){
          $cell1.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });
      $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title2").html()
        },
        success: function(response){
          $cell2.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
      });

    });
</script>

我有$cell1，$cell2，#cell3 ......等等......这里只显示了2 ..但每次，当我想改变背景时，我必须调用ajax，这使我的脚本非常冗长。我修改代码的方法是为ajax请求创建一个自定义jquery函数并更改背景。

我该怎么做？

提前致谢..

blasteralfred

Answer 1

您的HTML是什么样的？

假设你有类似的东西：

<div id="res1" class="cell">
    <h2 id="title1" class="title">Title</h2>
    <p>Some content</p>
</div>

<div id="res2" class="cell">
    <h2 id="title2" class="title">Title</h2>
    <p>Some content</p>
</div>

你可以这样做：

$(document).ready(function(){
    $('.cell').each(function(){
        cell = $(this);
        $.post('ajax.php',{filename: $('h2.title', cell).html()}, function(){
            cell.css("background-image", "url('pdfthumb/" + response + ".jpg')");
        });
    });
});

这样做的好处是你的小区ID是什么并不重要。你不必尝试循环一组具体的数字。

Answer 2

你可以做的是：

changeBackground = function(response, num)
{
     $('#res'+num).css("background-image","url('pdfthumb/" + response + ".jpg')");
}

for(var i=0;i < maxNum ; i++ )
{
     $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#title"+i).html()
        },
        success: function(response){
               changeBackground(response,i)
        }
      });
}

changebackground是你的自定义函数，你也可以在这里进行多次ajax调用，但这是一个循环。 maxNum是您想要更改背景的次数/ dom对象。

注意：对象应该是相应的名称，此脚本专门用于您在此处定义的模板（即title1，title2等，res1，res2等应该是您在示例脚本中的名称）

Answer 3

类似的东西：

function updateBackground(cellId, titleId) {
    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: {
          filename: $("#"+titleId).html()
        },
        success: function(response){
          $("#"+cellId).css("background-image", "url('pdfthumb/" + response + ".jpg')");
        }
    });
}

$(document).ready(function(){
    updateBackground("res1", "title1");
    updateBackground("res2", "title2");
});

Answer 4

优化代码的一种方法是结合您的请求和响应。这样，您将在一个请求中获得所有背景图像。

用于多个ajax请求的自定义jQuery函数

4 个答案: