Question

我试图在选择一个单选按钮并隐藏所有其他 div 后显示具有不同文本的 div。

<?php
foreach ($items as $item){
$i=1;

echo '
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="detail_variant'.$i.'" >
       <label class="form-check-label">'.$item['title'].'</label>
</div>';

$detail_variant_html.="
<div id='detail_variant".$i."'>
  <p> size: ".$item['size'."<br>
  Color: ".$item['color']."<br>
  Garment:".$item['garment']."
  </p>
</div>";
$i++;

}
echo ' <div class="card-body">'.echo $detail_variant_html.'  </div>';
    ?>

Answer 1

您可以在 jquery 中定义，如果单击单选按钮，则隐藏您想要的 div（使用 id 调用）。

并且通过选中单选按钮，您可以使用js的hide()方法将其在您的页面中消失

例如：

if(document.getElementById('detail_variant').checked) {
   $('#detail_variant').hide();
}

Answer 2

您在每次循环迭代中初始化 i，使其始终为 =1。

并且由于您需要不同文本的分区应该在单选按钮上可见，所以我像这样编辑它...

<?php
$i=1;
foreach ($items as $item){
echo '
<div class="form-check">
    <input class="form-check-input" type="radio" name="radio1" id="detail_variant" onchange="showdiv('.$i.');">
       <label class="form-check-label">'.$item['title'].'</label>
</div>';

//initially hide all
$detail_variant_html.="
<div style='display:none' id='detail_variant".$i."'> 
  <p> size: ".$item['size'."<br>
  Color: ".$item['color']."<br>
  Garment:".$item['garment']."
  </p>
</div>";
$i++;

}
echo ' <div class="card-body">'.echo $detail_variant_html.'  </div>';
    ?>
<script>
function showdiv(n){
var div = "detail_variant" + n;
document.getElementById("div").style.display='';//show only division you want
}
</script>

注意：- 一旦显示了分区，我并没有隐藏在上面的代码中，如果需要，您可以隐藏它。如果这行得通，也请给我反馈如果您有错误，请告诉我。

选择单选按钮后显示/隐藏 div

2 个答案: