使用jQuery追加

好的，這是一個非常長的帖子。爲了插入圖像，我需要遍歷多個DOM樹結構。爲了記錄，圖像通過PARAM罰款。我不明白的是爲什麼它沒有發佈。所以，這裏是我目前使用的代碼。使用jQuery追加

function validateImage(event) { 
    var $input = $(this); 
    var width = 75; 
    var height = $input.closest('.logo-block').length > 0 ? 35: 75; 
    $input.animate({ 
     'backgroundColor': '#999' 
    }, 
    250); 
    $.get('/meta/thumbnail/' + $input.val() + '/' + height + '/' + width + '/', 
    function(result) { 
     $input.stop(); 
     if (result != 'No Image Available') { 
      $input.css('background-color', '#55FF00'); 
      var $block = $input.closest('div.thumb-image'); 
      if ($block.closest('.center-callout-info').length > 0) { 
       // in center column, add image. 
       $input.val(''); 
       $('<div class="thumb">' + result + '</div>').appendTo($block.closest('.image-container').not($block.closest('.more-images .image-container'))).find('img').addClass('selected'); 
      $('.center-callout-info .block img.meta-thumb').click(bindImageSelection); 
      } 
     } else { 
      $input.css('background-color', '#FF0000'); 
      $input.val(''); 
     } 
     $input.animate({ 
      backgroundColor: '#FCFCFD' 
     }, 
     2000); 
    }); 
}

的HTML如下：

<fieldset class="collapsible collapsed"> 
    <legend class="collapse"><a href="#">Image Management</a></legend> 
    <div class="fieldset-wrapper"><input type="button" value="Save Images" id="saveForm" class="submitButton" name="save" /> 
     <div class="center-callout-info"> 
      <div class="callout-images"> 
       <div class="high-res block active-tab" id="46051"> 
        <div class = "image-container"> 
         <div class="thumb-image thumb selected" id="AVE_BOX_TOPS_EDUCATION_4C"> 
         <img class="meta-thumb" height="" src="/thumbs/AVE_Box_Tops_Education_4C.png" title="AVE_BOX_TOPS_EDUCATION_4C" /></div> 
        <div class="thumb-image thumb selected" id="FEL_BANKERS_BOX_BLK"> 
         <img class="meta-thumb" height="" src="/thumbs/FEL_BANKERS_BOX_BLK.png" title="FEL_BANKERS_BOX_BLK" /></div> 
        <div class="thumb-image thumb selected" id="FEL_BB_FOLDER_RAILS_BLK"> 
         <img class="meta-thumb" height="" src="/thumbs/FEL_BB_Folder_Rails_BLK.png" title="FEL_BB_FOLDER_RAILS_BLK" /></div> 
        <div class="thumb-image thumb selected" id="FEL_SFI_BLK"> 
         <img class="meta-thumb" height="" src="No Image Available" title="FEL_SFI_BLK" /></div> 
        <form action="/node/46051/edit" accept-charset="UTF-8" method="post" id="skuimage-get-more-form"> 

         <div><div class="form-item" id="edit-new-high-res-wrapper"> 
         <label for="edit-new-high-res">New: </label> 
         <input type="text" maxlength="128" name="new_high_res" id="edit-new-high-res" size="15" value="AVE_AVERY_BLK" class="form-text new-button" /> 
         </div> 
         <input type="hidden" name="form_build_id" id="form-de9c77d3f4d32257a52dc609e6697769" value="form-de9c77d3f4d32257a52dc609e6697769" /> 
         <input type="hidden" name="form_token" id="edit-skuimage-get-more-form-form-token" value="f7bb86ba8678fa2fb5b911f1df819bec" /> 
         <input type="hidden" name="form_id" id="edit-skuimage-get-more-form" value="skuimage_get_more_form" /> 

         </div></form> 
         </div></div></div></div></div></fieldset>

現在，我想<IMG>出現與其他<IMG>的，它們位於div中有image-container類。

我想我在這裏的消息中有一切。任何幫助都會很棒。

編輯編輯編輯編輯編輯編輯

下面是答案：

好吧，這裏就是答案了。在上面，你會看到下面的代碼行：

var $block = $input.closest('div.thumb-image');

然而，向上遍歷DOM樹後，我發現我需要設置這是實際的地方，我希望把圖像。所以，實際上var $block是：

var $block = $input.closest('.image-container');

在那之後，我不得不改變它把圖像以及地方。

$('<div class="thumb">' + result + '</div>').appendTo($block).find('img').addClass('selected');

來源

2012-05-04 webdevsoup

您是否收到任何錯誤？ –

不，沒有錯誤。這只是不張貼到網頁上。 – webdevsoup

+12

@webdevsoup如果您回答自己的問題，請發佈下面的答案，讓社區幫助您評估它。 – Sampson

我不是很清楚你的帖子。但是如果理解了一點，它就是發送圖像並從應用程序的後端獲取響應。如果我弄錯了，我很抱歉，但如果我是對的。那麼這裏是我的答案 -

你不能使用ajax上傳文件。那就是你不能發送諸如$ .ajax（），$ .get（），$ .post（）等函數的文件作爲數據。

來源

2012-05-21 00:06:53

使用jQuery追加

回答

相關問題