0

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

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

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

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

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

所以我的问题是我需要添加什么， $(".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>");
4

3 回答 3

1

我相信你的计数器变量将永远是 1。所以，你的span.imagemsg1都是一样的。这就是为什么您会在每一行中收到消息。在函数外设置计数器以递增计数器。

我相信这将阻止您所看到的行为，但我想对其他答案大声疾呼，因为他们为清理此代码提供了很好的建议。

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

于 2012-05-03T02:31:15.730 回答
0

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

于 2012-05-02T23:33:08.220 回答
0

能够看到 HTML 会很有帮助。此外，我无法在您的脚本中看到您对“结果”值做了什么。在这个阶段，我个人认为没有足够的信息可以让你满意。

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

例如看下面的代码。它有点证明了您对计数器变量的问题。看起来在 5 秒结束时它会吐出 1 到 10 的数字，但不会。它将吐出值“10”十次。

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

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

var x = 0;
for (var i = 0; i < 10; i++)
{
  var newScope = function() {
    x++;
    var y = x;
    setTimeout(function() { console.log(y); }, 5000);
  }();
}
于 2012-05-03T00:18:43.343 回答