正しい表の行に削除メッセージを表示するにはどうすればいいですか？

Question

以下は、ファイルが独自のテーブル行にアップロードを完了した後に起こることを制御する機能です。各テーブル行は、ユーザーがファイルをアップロードできるファイル入力から構成され、ファイルの名前が自身のテーブル行に追加されます。

アップロードに成功した場合は正常終了を示し、アップロードに失敗した場合はエラーが発生したことを示すメッセージが表示されます。しかし、私はまた、ユーザーが "削除"ボタンをクリックしてファイルを削除できる機能の中に、別の機能を持っています。私が持っている唯一の問題は、このコードの行である：

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

はのは、私は2つのテーブルの行を持っているとしましょう、と私は、最初の行のファイルを削除し、.imagemsg内のメッセージは、最初に表示されます行が削除された行であるため、第1行と第2行にメッセージを表示すべきではありません。

もう1つの例として、4つのテーブル行があり、3行目のファイルを削除すると、削除が発生した場所の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; 
} 

BELOW HTMLコードです：あなたは一意の識別子を追加する必要がありますあなたの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

が、私はIDを使用することをお勧めし

以下は完全なコードです。この方法で、エラーメッセージを追加する要素を参照しようとすると、要素が1つしか見つかりません。現在、class = "imagemsg"の要素の最初の出現を探しています。それぞれの行をループしてIDの "imagemgs1"、 "imagemsg2"などを作成する方法が必要です。

Answer 3

HTMLを表示できると便利です。また、私はあなたのスクリプトであなたが "結果"の値で何をするかを見ることができません。この段階では、私は個人的にあなたがまだ満足に役立つのに十分な情報がないと思っています。

しかし、間違いなく表示される問題は、あなたの "カウンタ"変数にあります。たぶんそれはあなたの問題です - 私が上に求めた詳細なしで伝えるのは難しいです。あなたのjQuery.ajax呼び出しはある時点で完了しますが、 "counter"の値はjQuery.ajax（）メソッドを呼び出したときと同じではありません。これは、 "counter"変数が別のスコープで宣言されているためです。

など。下のコードを見てください。これは、カウンタ変数の問題を示しています。 5秒後に1から10の数字が吐き出されるように見えるかもしれませんが、そうではありません。値 "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); 
    }(); 
}