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;   
}

CALL BACK FUNCTION：

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

我听说最好是这样做但我不知道如何编码：

将相关元素传递给回调函数。你已经有了$（this），所以你可以从中得到正确的行并将它放在一个变量中，然后在回调中访问它以将结果放在正确的位置。

更新：

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"，其中 N 会增加并且每行都是唯一的。然后您更改为$("#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); 
       });

如何在正确的行中显示删除消息

2 个答案: