我可以使用 getElementByTagId 选择多个 div 标签吗？答案

【问题标题】：Can I select multiple div tags using getElementByTagId?我可以使用 getElementByTagId 选择多个 div 标签吗？
【发布时间】：2021-06-12 06:38:05
【问题描述】：

我正在尝试将带有 document.getElementById 的 div display:none 显示给多个 div，但只能让它与一个 div id 一起使用

<div id="spill" name="audit" class="audit" style="display:none;">Quantity:-
<select name='qtyspill' > 
<?php
    for ($i=1; $i<=3; $i++)
    {
        ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php
    }
?> 
</select>
</div>

<div id="pbox" name="audit100" class="audit" style="display:none;">Quantity:-
<select name='qtypbox' > 
<?php
    for ($i=1; $i<=3; $i++)
    {
        ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php
    }
?> 
</select>
</div>

我的js

function getValue(x) {
  if(x.value == '0'){   
    document.getElementById('spill').style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById('spill').style.display = 'block';  // you need a identifier for changes
  }
}

我怎样才能让它工作我不想编写多个 js，因为我的一些审计选择可能超过 20 个

我尝试使用 Lelio 建议如下，不确定我是否理解正确，但是当我单击输入单选按钮时它没有显示差异

<div class="rating">
       <label for="happy">1</label>
      <input type="radio" name="spilldeck" class="happy" id="r1" value="0" onChange="getValue(this)" checked />

<label for="neutral">2</label>
<input type="radio" name="spilldeck" class="neutral" id="r2" value="1" onChange="getValue(this)" />

<label for="sad">3</label> 
      <input type="radio" name="spilldeck" class="sad" id="r3" value="2" onChange="getValue(this)" />
</div>

然后我的显示隐藏div

<div id="audit1" name="audit1" class="audit" style="display:none;">Quantity:-
<select name='qtyspill' > 
<?php
    for ($i=1; $i<=3; $i++)
    {
        ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php
    }
?> 
</select>
</div>

<div id="audit2" name="audit2" class="audit" style="display:none;">Quantity:-
<select name='qtypbox' > 
<?php
    for ($i=1; $i<=3; $i++)
    {
        ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php
    }
?> 
</select>

然后建议js代码

function getValue(x,idName) {
  if(x.value == '0'){   
    document.getElementById(idName).style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById(idName).style.display = 'block';  // you need a identifier for changes
  }
}

【问题讨论】：

你喜欢使用jQuery还是不使用jQuery？
id 在 dom 中必须是唯一的。这就是为什么 getElementById 将始终返回单个元素的原因。如果您按班级名称选择，那么您将获得一个集合。如果您有多个具有相同 id 的元素，则只有第一个可用
你能添加一个你如何使用getValue的例子吗？ x是什么？当你所做的只是隐藏或显示div#spill时，为什么它被命名为“getValue”？
如果有替代方法有什么建议吗？如何使用我尝试过的类名，但它不起作用 document.getElementsByClassName("audit")
这是一段代码 sn-p 我用来显示和隐藏一个 div 我试图更改它以在多个 div 上执行此操作我对实现此目标的任何想法持开放态度

标签： javascript html show-hide getelementbyid

【解决方案1】：

假设您想在不同的 id 上使用相同的函数，请将 id 作为函数的参数。因此，当您调用它时，您将传递 x 和 id

function getValue(x,idName) {
  if(x.value == '0'){   
    document.getElementById(idName).style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById(idName).style.display = 'block';  // you need a identifier for changes
  }
}

否则，如果您想选择共享相同 id 的多个项目，那是一个无效的 html，并且您的 js 将仅针对具有该 id 的第一个元素跳过其他元素

【讨论】：

我已经尝试过你的代码，也许我遗漏了一些东西，因为它不起作用
你应该说明你何时以及如何调用这个函数并解释它是什么意思它不起作用
我第一次在评论中引用标签时没有正确使用``
这是我的表单输入 -sn-p <input type="radio" name="spilldeck" class="happy" id="r1" value="0" onChange="getValue(this)" checked />
用代码编辑您的问题，请不要在此处将其作为 cmets 发布。这完全不清楚。使用按钮创建一个复制问题的 sn-p