如何顯示在正確的行刪除消息

Question

下面是它控制的文件已在自己的錶行上傳完成後，無論發生什麼情況的功能。每個錶行包括文件輸入，用戶可以上傳文件，然後將該文件的名稱是它自己的錶行內附加的。

如果該文件成功，那麼它會顯示一個成功的消息時，如果上傳不成功，那麼它會顯示一個消息，說明存在錯誤。但我也有另一個功能，用戶可以通過點擊「刪除」按鈕來刪除文件。我唯一的問題是這行代碼：

$(".imagemsg").html(data); 

比方說，我有2個錶行，我刪除了第一行中的文件，只應顯示在第一內.imagemsg消息行，因爲這是刪除發生的行，它不應該在第一行和第二行顯示消息。

所以我的問題是我需要添加到$(".imagemsg").html(data);，使該消息僅在文件的缺失發生的行內，而不是在所有.imagemsg這是每行顯示的是什麼？

下面是完整的代碼：

function stopImageUpload(success, imagefilename){ 

     var result = ''; 

     if (success == 1){ 
     result = '<span class="imagemsg">The file was uploaded successfully!</span><br/><br/>';  
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
     } 
     else { 
     result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>'; 
     } 


     $(".deletefileimage").on("click", function(event) { 

     var image_file_name = $(this).attr('image_file_name'); 

     $(this).parent().remove(); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
     .done(function(data) { 
     $(".imagemsg").html(data); 
     }); 


    }); 

     return true; 
} 

回調函數：

<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script> 

我聽說，這是最好的，如果這會做，但我不知道如何實現代碼：

通過相關元素的回調函數。你已經有$（本），所以你也許可以從得到正確的行，把它放在一個變量，然後訪問它在回調把結果在正確的地方。

UPDATE：

function stopImageUpload(success, imagefilename){ 

     var result = ''; 
     var counter = 0; 
     counter++; 

     if (success == 1){ 
     result = '<span class="imagemsg'+counter+'">The file was uploaded successfully!</span><br/><br/>';  
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
     } 
     else { 
     result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>'; 
     } 


     $(".deletefileimage").on("click", function(event) { 

     var image_file_name = $(this).attr('image_file_name'); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
     .done(function(data) { 
     $(".imagemsg" + counter).html(data); 
     }); 

     $(this).parent().remove(); 

    }); 

     return true; 
} 

Answer 1

如果你有多個行與類imagemsg，你的代碼

$(".imagemsg").html(data); 

將在所有這些

加載索引你的方式在，你可以嘗試

$(".imagemsg").eq(0).html(data); 

爲第一個

DEMO

可選擇地改變class="imagemsg"到id="imagemsgN"其中Ñ遞增，並且對於每一行唯一的。然後你改爲$("#imagemsg"+counter)去吧

Answer 2

一個快速的方法是添加一個計數器，然後.imagemsg變成了「.imagemsg」。$ counter，然後一個msg返回實際上只返回相關行 - 未經測試的代碼但是你明白了。 。

如

$counter++; 
if (success == 1){ 
     result = '<span class="imagemsg'.$counter.'">The file was uploaded successfully!</span><br/><br/>';  
     $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
     } 
     else { 
     result = '<span class="imageemsg">There was an error during file upload!</span><br/><br/>'; 
     } 


     $(".deletefileimage").on("click", function(event) { 

     var image_file_name = $(this).attr('image_file_name'); 

     $(this).parent().remove(); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
     .done(function(data) { 
     $(".imagemsg".$counter).html(data); 
     });