Question

下面是一个函数，它控制文件在自己的表行中上传完成后发生的任何事情。每个表行包含一个文件输入，用户可以在其中上传文件，然后将文件名附加在其自己的表行中。

如果上传成功，则会显示成功的消息，如果上传不成功，则会显示一条消息，指出存在错误。但是我还在函数中有另一个函数，用户可以通过单击“删除”按钮删除文件。我唯一的问题是这行代码：

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

假设我有2个表行，并且我删除了第一行中的文件，.imagemsg中的消息应该只显示在第一行中，因为这是删除发生的行，它不应该显示第一行和第二行中的消息。

另一个例子是，如果我有4个表行并且我删除了第三行中的文件，那么该消息应该显示在第3行中，因为这是发生删除的地方。

所以我的问题是我需要添加到$(".imagemsg" + counter).html(data);中，以便消息仅显示在文件删除行中，而不是显示在每行中的所有.imagemsg中？

以下是完整代码：

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

以下是HTML代码：

  var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "</p><p class='listImage' align='left'></p>" +
    "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");

Answer 1

我相信您的计数器变量将始终为1.因此，您的所有span.imagemsg1都是相同的。这就是你在每一行都得到消息的原因。将计数器设置在函数外部以增加计数器。

我相信这会阻止你所看到的行为，但我想对其他答案大喊大叫，因为他们提供了很好的建议来清理这些代码。

坦率地说，你不应该在课堂上使用唯一标识符。为什么不使用id或data-image-count属性？

Answer 2

在你的html代码中，你需要添加一个唯一的标识符，我建议使用id。这样，当您尝试引用元素以添加错误消息时，它将只找到一个元素。目前它正在寻找具有class =“imagemsg”的元素的第一次出现。你需要一种方法来遍历每个“行”并使id成为“imagemgs1”，“imagemsg2”等...希望它有所帮助。

Answer 3

能够看到HTML会很有帮助。此外，我无法在您的脚本中看到您对“结果”值的处理方式。在这个阶段，我个人认为没有足够的信息来帮助你满意。

但是，您无疑会看到的问题是您的“计数器”变量。也许这就是你的问题 - 如果没有我上面提到的细节，很难说。您的jQuery.ajax调用将在某个时刻完成，但“counter”的值可能与您调用jQuery.ajax（）方法时的值不同。这是因为“counter”变量在不同的范围内声明。

E.g。看下面的代码。它有点用逆变量来证明你的问题。它可能看起来像在5秒结束时它将从1到10吐出数字，但它不会。它会将值“10”吐出十次。

var x = 0;
for (var i = 0; i < 10; i++)
{
  x++;
  setTimeout(function() { console.log(x); }, 5000);
}

此问题也适用于您的代码。您可以通过将变量值复制到本地范围的变量来解决上述问题。 E.g：

var x = 0;
for (var i = 0; i < 10; i++)
{
  var newScope = function() {
    x++;
    var y = x;
    setTimeout(function() { console.log(y); }, 5000);
  }();
}

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

3 个答案: