酒店网站房间列表mysqli_fetch_array价格显示异常问题

嘿，我立刻就发现了问题所在——你所有房间的价格弹窗都共用了同一个ID price-break-down-1！

当你通过while循环渲染房间列表时，每一行都会生成一个弹窗，但它们的ID完全相同。浏览器在匹配锚点链接（href="#xxx"）时，只会找到页面中第一个带有该ID的元素，所以不管你点击哪个房间的「Lista de Preços」链接，弹出的都是第一个房间的价格计算结果。

修复步骤 #

只需要给每个弹窗生成唯一的ID就行，最简单的方式就是用房间自身的id字段来拼接：

1. 修改弹窗链接的href属性，把固定的price-break-down-1改成带房间ID的动态值
2. 同步修改对应弹窗div的id属性，保证和链接的锚点一致

修改后的代码片段 #

<?php while($regx=mysqli_fetch_array($resx)){ ?>
<div class="room-box">
  <form method="post">
    <div class="col-md-5 room-img" data-bg-img="<?php echo $regx['nome_doc'];?>">
      <div class="select-room-box">
        <a href="booking-2.php?id=<?php echo $regx['id'];?>">Selecione Este Quarto</a>
      </div>
    </div>
    <div class="r-sec col-md-7">
      <div class="title-box">
        <div class="title"><?php echo $regx['nome'];?></div>
        <div class="price">
          <div class="title">Preço :</div>
          <div class="value"><?php echo $regx['preco'];?>€</div>
        </div>
        <!-- 修改这里的href，加入房间ID -->
        <a href="#price-break-down-<?php echo $regx['id'];?>" class="price-breakdown"><i class="fa fa-caret-right"></i>Lista de Preços</a>
        <!-- 修改这里的id，加入房间ID -->
        <div id="price-break-down-<?php echo $regx['id'];?>" class="price-breakdown-popup mfp-hide">
          <table>
            <tr>
              <td>
                <div class="title">Preço Base</div>
                <div class="duration">x <?php $diff= date_diff($entrada,$saida); echo $diff->format("%a noites"); ?> </div>
              </td>
              <td class="price"><?php echo $regx['preco'];?>€</td>
            </tr>
            <tr>
              <td>
                <div class="title">Total</div>
                <div class="duration"><?php echo $diff->format("%a noites"); ?></div>
              </td>
              <td class="price"><?php echo $regx['preco']*$diff->days;?>€</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
<?php } ?>

额外提示 #

HTML规范要求页面内的元素ID必须是唯一的，以后遇到类似DOM元素匹配异常的问题，先检查ID是否重复，这是很常见的坑哦！

内容的提问来源于stack exchange，提问作者Diogo SIlva