选择要显示的正确元素

Question

因此，我有下面的代码想要更改，但是除了使用Javascript之外，我不确定我需要遵循的方向。 理想情况下，我想单击按钮（id =“ popupbtn”），以便显示相应的“ MainDescription”面板。 我的问题是我将所有这些都放在一个循环中，那么如何使每个按钮显示与其连接的主描述呢？

我希望这是有道理的，因为我花了一段时间试图弄清楚如何解释自己所拥有的！

!--Quick Details-->
<h4 class="text-info"><?php echo $forsale['make'];?> <?php echo $forsale['model'];?> <?php echo $forsale['variant'];?></h4>
<h4>Price: £<?php echo $forsale['price'];?></h4>
<input type="hidden" id="stockbox" value="<?php echo $forsale['StockID'];?>">
<p id="stockref" class="form-control">Stock Ref: <?php echo $forsale['StockID'] ?></p>
<button type="button" class="btn btn-md form-control" id="popupbtn" onclick="MainDescription()">View More</button>

<div class="maindescription" id="maindesc" value="<?php echo $forsale['StockID'];?>" style="display:none">
    <p id="descYear" class="form-control">Year: <?php echo $forsale['year'] ?></p>
    <p id="descmileage" class="form-control">Mileage: <?php echo $forsale['mileage'] ?></p>
    <p id="descFuel" class="form-control">Fuel: <?php echo $forsale['fuel'] ?></p>
    <p id="descDoors" class="form-control">No. Doors: <?php echo $forsale['doors'] ?></p>
    <p id="descTrans" class="form-control">Transmission: <?php echo $forsale['trans'] ?></p>
    <p id="descEnginesize" class="form-control">Engine Size: <?php echo $forsale['enginesize'] ?></p>
    <p id="description" class="form-control">Description: <?php echo $forsale['description'] ?></p>
</div>

Answer 1

您可以在HTML文档的末尾使用类似的功能来做到这一点：

<script>
function MainDescription() {
  const panel = document.getElementById('maindesc');
  if (panel.style.display === 'none') {
    panel.style.display = 'block'
  } else {
    panel.style.display = 'none'
  }
}
</script>