时间戳

首页 > 解决方案 > 选择要显示的正确元素

javascript - 选择要显示的正确元素

问题描述

因此，我希望更改以下代码，但除了需要使用 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>

标签： javascript

解决方案

您可以在 HTML 文档的末尾使用这样的函数来执行此操作：

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

推荐阅读