僅在while循環中的第一個結果中加載圖像

-1

無論從哪個結果中單擊哪個按鈕，都會在while循環中的第一個結果的按鈕下方顯示加載圖像。例如，如果我點擊第一個結果上的提交按鈕，加載圖像將顯示在其下方。沒關係。但是當我點擊除第一個結果之外的任何其他結果的提交按鈕時，加載圖像僅顯示在第一個結果下方，而不是在特定結果的提交按鈕下方。僅在while循環中的第一個結果中加載圖像

<?php while($a = $stmt->fetch()){ ?> 
    <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" 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; 
    }); 
});

來源

2017-04-14 Shubham Jha

在以下行已設置了裝載圖像的id標籤;這對於while循環的每次迭代都必須是唯一的，否則你會遇到像你遇到的問題。請使用唯一的ID和/或使用JavaScript來選擇要顯示的最近的加載圖像。

<div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>

來源

2017-04-14 13:30:03 Juned

您的建議很好。但是，這不是OP問題的原因：如果他們使用'id'進行選擇，它將只會成爲一個問題，因爲它總是會返回具有該「id」的第一個項目，但目前尚未發生。 –

但這是用戶正在經歷的。他說，當點擊提交按鈕時，只顯示第一個加載圖像，而不管點擊哪個。 :) – Juned

當我使用類然後點擊所有圖像打開時，當我點擊任何按鈕（所有圖像我的意思是在while循環中的每個按鈕下的所有加載圖像）。我應該爲他們使用一個獨特的我嗎？如果是的話，那麼如何？ –

使用.classes當涉及到生成一個循環元素的數量。

使用#id作爲獨特的元素。

要解決你的代碼執行以下操作：

添加和修復任何丟失的類
替換代碼中的所有ID屬性與類
使用事件代表團偵聽click事件任何提交按鈕。閱讀以下內容：jQuery API Docs on event delegation

來源

2017-04-14 13:51:06

當我使用類，然後單擊所有圖像打開時，當我點擊任何按鈕（所有圖像我的意思是所有加載圖像，在每個按鈕在while循環）。我應該爲他們使用一個獨特的我嗎？如果是的話，那麼如何？ –

僅在while循環中的第一個結果中加載圖像

回答

相關問題