仅在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循环中的第一个结果中加载图像

回答

相关问题