Javascript:如何使用单选按钮在两个 div 之间显示/隐藏？

Question

我在使用带有 JavaScript 的单选按钮隐藏/显示图像时遇到问题。我想做的是，在加载页面时，默认情况下只显示第一张图片，而隐藏第二张图片。然后用户可以在单击单选按钮时选择显示或隐藏哪一个。

这是我目前所做工作的一个片段。

<input type="radio" name="img1" onclick="img(0)" checked>Image 1
<input type="radio" name="img2" onclick="img(1)">Image 2

<div id="img1">
  <!-- insert image -->
</div>
<div id="img2">
  <!-- insert image -->
</div>


<script>
  function img(x){
    if(x==0){
      document.getElementById('img2').style.display='none';
      document.getElementById('img1').style.display='block';
    }
    else{
      document.getElementById('img1').style.display='none';
      document.getElementById('img2').style.display='block';
    }
    return;
  }
</script>

这里的问题是，加载页面后，会显示两个图像。第二张图片只有在点击第一张图片的单选按钮后才会隐藏，反之亦然。此外，checked 属性不起作用。

Answer 1

您的方法的问题在于，通过添加更多图像，您对隐藏和显示的验证将变得越来越复杂，这在将来不会很好。您应该尝试一些更灵活的方法，我会给您一个包含 3 张图片的示例解决方案，以便您更容易理解我的观点。

注意:输入中的“名称”标签将创建“ radio 组”，因此它们都需要相同，否则您将同时拥有多个事件 radio 。

选择哪个图像可见的输入，我决定传递图像的 id，因为这样可以更容易地在下一步中搜索它

<span><input type="radio" name="image-selector" onclick="handler('img1')" checked>Image 1</span>
<span><input type="radio" name="image-selector" onclick="handler('img2')">Image 2</span>
<span><input type="radio" name="image-selector" onclick="handler('img3')">Image 3</span>

图像，在 2 和 3 上显示 none 将确保只有第一个在开始时可见还有一个额外的类图像可以更容易地隐藏所有图像并仅显示我们想要的图像我们最终得到了多张图片

<div id="img1" class="image">1</div>
<div id="img2" class="image" style="display:none">2 </div>
<div id="img3" class="image" style="display:none">3</div>

最后是显示和隐藏图像的处理函数，这里的优点是您可以在 html 中添加更多图像而无需更改此函数

function handler(x) {
      // get the list of all images and convert the html collection to an array
      var imagesArray = Array.from(document.getElementsByClassName('image'))

      // cycle the array to show the one selected and hide all the others
      imagesArray.forEach(ele => {
        if(ele.id === x) {
          ele.style.display = 'block'
        } else {
          ele.style.display = 'none'
        }
      })
  }

一些关于我用过但你自己没有用过的东西的信息

html合集:https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp

通过类名获取元素:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

数组 forEach:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach