0

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

アップロードが成功した場合は成功メッセージが表示され、アップロードが失敗した場合はエラーがあることを示すメッセージが表示されます。しかし、ユーザーが「削除」ボタンをクリックしてファイルを削除できる関数内に別の関数もあります。私が持っている唯一の問題は、次のコード行にあります。

 $(".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;   
}

以下は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が見れると助かります。また、スクリプトで「結果」の値をどうするかわかりません。この段階では、私は個人的に、あなたを満足させるのに十分な情報がまだないと思います.

ただし、間違いなく表示される問題は、「カウンター」変数にあります。多分それはあなたの問題です-私が上で求めた詳細なしではわかりにくい. jQuery.ajax 呼び出しはある時点で完了しますが、「counter」の値は、j​​Query.ajax() メソッドを呼び出したときと同じではない場合があります。これは、「カウンター」変数が別のスコープで宣言されているためです。

たとえば、以下のコードを見てください。これは、カウンター変数に関する問題を示しています。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);
  }();
}
于 2012-05-03T00:18:43.343 に答える
0

あなたのHTMLコードでは、一意の識別子を追加する必要があります.idを使用することをお勧めします. このように、要素を参照してエラー メッセージを追加しようとすると、1 つの要素しか見つかりません。現在、class = "imagemsg" の要素の最初の出現を探しています。各「行」をループして、ID の「imagemgs1」、「imagemsg2」などを作成する方法が必要になります。

于 2012-05-02T23:33:08.220 に答える