Question

所以我有下面的代码，我希望改变，但我不确定我需要使用的方向除了我需要使用Javascript。理想情况下，我想点击按钮（id =＆＃34; popupbtn＆＃34;），以显示相应的主要描述＆＃39;面板。我遇到的问题是我将所有这些都放在一个循环中，那么我该如何让每个按钮显示它所连接的主要描述？

我希望这是有道理的，因为我花了一段时间试图找出解释我的方法！

!--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>

选择要显示的正确元素

1 个答案: