0

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

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

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

2 つのテーブル行があり、最初の行でファイルを削除するとします。.imagemsg 内のメッセージは最初の行にのみ表示されます。これは削除が発生した行であり、メッセージは表示されません。 1列目と2列目。

$(".imagemsg").html(data);だから私の質問は、メッセージがファイルの削除が発生した行内にのみ表示され、すべての行にあるすべての行に表示されないよう.imagemsgにするには、何を追加する必要があるかということです。

以下は完全なコードです。

function stopImageUpload(success, imagefilename){

      var result = '';

      if (success == 1){
         result = '<span class="imagemsg">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');

        $(this).parent().remove();

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
      .done(function(data) {
        $(".imagemsg").html(data);
       });


    });

      return true;   
}

コールバック機能:

 <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>

これを行うのが最善だと聞きましたが、これをコーディングする方法がわかりません:

関連する要素をコールバック関数に渡します。すでに $(this) があるので、おそらくそこから適切な行を取得して変数に入れ、コールバックでアクセスして結果を適切な場所に置くことができます。

アップデート：

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

2 に答える 2

0

クラスimagemsgの行が複数ある場合、コード

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

それらのすべてにそれをロードします

インデックスを作成するには、試すことができます

$(".imagemsg").eq(0).html(data);

最初のもののために

デモ

または、Nがインクリメントされ、行ごとに一意になるように変更class="imagemsg"します。次に、に変更してそれに到達しますid="imagemsgN"$("#imagemsg"+counter)

于 2012-05-02T11:37:41.800 に答える
0

簡単な方法は、カウンターを追加することです。その後、.imagemsg は ".imagemsg".$counter になり、返されたメッセージは実際には関連する行にのみ送られます - テストされていないコードですが、アイデアは得られます。

例えば

$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'); 

        $(this).parent().remove(); 

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name) 
      .done(function(data) { 
        $(".imagemsg".$counter).html(data); 
       });
于 2012-05-02T11:38:27.237 に答える