類正在while循環中的所有結果下進行圖像加載

Question

這裏，當我單擊由while循環生成的任何提交按鈕時，在提交按鈕下方的加載圖像顯示在while循環中的所有結果中。它實際上應該只顯示在點擊按鈕的下方。我知道它的發生，因爲我在這裏使用了CLASSES。我想我應該在這裏使用唯一的ID，以便結果顯示在特定的點擊按鈕下方。但我不知道如何實現這一點。或者我應該在這裏使用其他方法嗎？請看一看。

<?php while($a = $stmt->fetch()){ extract($a); ?> 
    <form method="post" action=""> 
     <input type="hidden" value="<?php echo $mbs_id; ?>" class="memid"> 
     <select class="validity" class="upgrade-valsel"> 
      <?php while($mv = $mval->fetch()){ extract($mv); ?> 
       <option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option> 
      <?php } ?> 
     </select> 
     <input type="submit" value="Upgrade" class="submit"> 
     <div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" class="loading-rent" style="margin-right: 0px; height: 40px"></div> 
    </form> 
<?php } ?> 

腳本

$(document).ready(function() { 
    $(".submit").click(function() { 
     var dataString = { 
      memid: $(this).parent().find(".memid").val(), 
      memname: $(this).parent().find(".memname").val(), 
      validity: $(this).parent().find(".validity").val() 
     }; 
     $.confirm({ 
      title: 'Confirm!', 
      content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?', 
      buttons: { 
       confirm: function() { 
        $.ajax({ 
         type: "POST", 
         dataType: "json", 
         url: "upgrade-process.php", 
         data: dataString, 
         cache: true, 
         beforeSend: function() { 
          $("#submit").hide(); 
          $(".loading-rent").show(); 
          $(".message").hide(); 
         }, 
         success: function (json) { 
          setTimeout(function() { 
           $(".message").html(json.status).fadeIn(); 
           $("#submit").show(); 
           $(".loading-rent").hide(); 
          }, 1000); 
         } 
        }); 
       }, 
       cancel: function() { 
        $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>'); 
       } 
      } 
     }); 
     return false; 
    }); 
}); 

Answer 1

你需要找到自己的裝載機localy 看看

var $loader = $(this).parent().find('.loading-rent');

$(document).ready(function() { 
    $(".submit").click(function() { 
    var dataString = { 
     memid: $(this).parent().find(".memid").val(), 
     memname: $(this).parent().find(".memname").val(), 
     validity: $(this).parent().find(".validity").val() 
    }; 

    var $loader = $(this).parent().find('.loading-rent'); 

    $.confirm({ 
     title: 'Confirm!', 
     content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?', 
     buttons: { 
      confirm: function() { 
       $.ajax({ 
        type: "POST", 
        dataType: "json", 
        url: "upgrade-process.php", 
        data: dataString, 
        cache: true, 
        beforeSend: function() { 
         $("#submit").hide(); 
         $loader.show(); 
         $(".message").hide(); 
        }, 
        success: function (json) { 
         setTimeout(function() { 
          $(".message").html(json.status).fadeIn(); 
          $("#submit").show(); 
          $loader.hide(); 
         }, 1000); 
        } 
       }); 
      }, 
      cancel: function() { 
       $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>'); 
      } 
     } 
    }); 
    return false; 
}); 

}）;