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

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

如果上载成功，则显示成功消息；如果上载不成功，则显示错误消息。但是我还有一个功能，用户可以通过点击“删除”按钮来删除文件。我唯一的问题是这行代码：

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

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

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

所以我的问题是我需要向

$（“.imagemsg”+counter.html（数据）添加什么

这样，消息只显示在删除文件时所在的行中，而不是显示在每行的所有

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

函数stopImageUpload（成功，imagefilename）{
var结果=“”；
var计数器=0；
计数器++；
如果（成功==1）{
结果='文件已成功上载！

'；
$（'.listImage'）.eq（window.lastUploadImageIndex）.append（''+htmlEncode（imagefilename）+'Remove
）；
}
否则{
结果='上传文件时出错！

'；
}
$（.deletefileimage”）。在（“单击”上，函数（事件）{
var image_file_name=$（this.attr（'image_file_name'）；
ajax（“deleteimage.php？imagefilename=“+image\u file\u name”）
.完成（功能（数据）{
$（“.imagemsg”+counter）.html（数据）；
});
$（this.parent（）.remove（）；
});
返回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>"); 

var$fileImage=$（“”+
“图像文件：

”+
"" + 
“
”+
""); 

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

能够查看HTML会有所帮助。此外，我无法在脚本中看到如何处理“result”值。在这个阶段，我个人认为还没有足够的信息来帮助你

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

例如，请看下面的代码。它在某种程度上说明了计数器变量的问题。在5秒钟结束时，它可能会吐出从1到10的数字，但不会。它将吐出值“10”十次

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

var x=0；
对于（变量i=0；i<10；i++）
{
x++；
setTimeout（函数（）{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);
  }();
}

var x=0；
对于（变量i=0；i<10；i++）
{
var newScope=函数（）{
x++；
变量y=x；
setTimeout（函数（）{console.log（y）；}，5000）；
}();
}

我相信您的计数器变量将始终为1。因此，所有的

span.imagemsg1

都是相同的。这就是为什么你在每一行都会收到信息。将计数器设置在函数外部以增加计数器

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

---

坦率地说，您不应该在类中使用唯一标识符。为什么不使用id或数据图像计数属性？

这是我尝试使用计数器变量的方法，但它不起作用。如果我要按照你说的那样去做，那么它将如何编码。这将非常有帮助：）如果您将“$（“.imagemsg”+counter.html（data）；”替换为“$（this.html（data）；”之类的内容，会发生什么情况？…不确定这是否适用于您，但是因为它在点击事件中，所以它可能会出现。我已经在问题的底部添加了html代码，这样你就可以看到html：）我认为Chaos希望从表格所在的页面中获得html。观察得很好。最好知道调用此stepImageUpload（）函数的是什么。我的假设是它在一个循环中，计数器意味着什么。。。假设…用户1364441，你可以通过查看它返回的值来检查natedavisolds理论：$（“.imagemsg”+counter）。length，如果它返回的值大于1，那么我认为他是对的！