Question

我在jQuery中有一个表单，我通过简单的ajax调用更新所有图像以重新加载整个页面。不幸的是，字幕也包含在那个表格中，当我开始写作时，我的字幕会被覆盖。

那么你会做些什么来保留它们？

你会..

在ajax调用之前保存它们并在之后替换它们？
避免一起更新字幕？

后者似乎是最好的选择，我只是不完全确定如何实现调用AJAX调用但只是更新图像。

我的甜蜜更新

$.extend({
  PhotoUpdater: {
    startUpdate: function(organization, gallery){
      url = "/organizations/" + organization + "/media/galleries/" + gallery + "/edit_photo_captions"
      timer = window.setTimeout(function(){
       $.PhotoUpdater.doUpdate(url)
      }, 5000) 
    },
    stopUpdate: function(){
      clearTimeout(timer);
      timer = 0;
    },
    doUpdate: function(url){
      $.ajax({type: "GET", url: url, dataType: "script"});
    },
    resetValues: function(){
      setTimeout(function(){ $("body").data("edit_photos_closed", "false"); 
                             $.PhotoUpdater.stopUpdate();
      }, 3000 );
    }
  }
});

我的HTML

<div class="alpha grid_4 zebraCaption">
      <img src="/tumblr_l0x861Yc5M1qbxc42o1_400.jpg" id="thumb_216" alt="Trippy Long Stockings's amazing picture">
      <br>
      <label for="gallery_photos_attributes_0_caption">Caption</label>
      <br>
      <input type="text" style="width: 236px;" size="35" name="gallery[photos_attributes][0][caption]" maxlength="35" id="gallery_photos_attributes_0_caption">
      <br>
      <a class="button_small facebox_window" href="/organizations/1/media/galleries/26/photos/216/edit_facebox_captions?captions_screen=true">edit crop</a>
      <a id="remove_crop_216" class="button_small remove_crop_button" href="http://localhost:3000/photos/216/toggle_crop">remove crop</a>
  </div>

Answer 1

您可以尝试这样的事情：

如果页面上有10个图像，那么AJAX响应可能是10个img源的JSON数组。然后你可以这样做：

var imgArray = {JSON ARRAY FROM AJAX}
$('img').each(function(index){
    $(this).attr('src',imgArray[index]);
});

这只有在您知道页面上图像的顺序时才有效，或者它们由ID标识。

更新表单时，是保存和替换文本，还是避免更新文本？

1 个答案: