如何隐藏具有同一类的所有元素并使用单选按钮显示该类中的一个特定 ID？

问题描述 投票：0回答：3

我有四个共享同一个类的 div，每个都有自己唯一的 id。我还有四个无线电可以控制它们的不透明度。单击单选按钮时，会出现相关的 div（不透明度 = 1），而其他三个 div 会隐藏。

这是我的代码。

<html>
  <body>
    <div id="div-one" class="my-divs"></div>
    <div id="div-two" class="my-divs"></div>
    <div id="div-three" class="my-divs"></div>
    <div id="div-four" class="my-divs"></div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-one" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

    <script>
      function changeOpacity(divId) {
        document.getElementById(divId).style.opacity = 1;
        document.querySelectorAll(".my-divs:not(divId)").forEach((e) => {
          e.style.opacity = 0;
        });
      }
    </script>
  </body>
</html>

但这似乎不起作用。我认为问题出在 

.my-divs:not(divId)
部分，因为我不知道如何从类选择器中排除 ID。我期待使用 vanilla JS 的解决方案，因为我还不熟悉 JQuery 和其他库。谢谢

javascript html css radio-button
3个回答
0
投票

你已经很接近了，问题出在 :not() 选择器上；它不能直接使用变量。相反，您可以使用属性选择器和模板文字的组合来动态排除具有指定 ID 的元素。

<html>
  <body>
    <div id="div-one" class="my-divs"></div>
    <div id="div-two" class="my-divs"></div>
    <div id="div-three" class="my-divs"></div>
    <div id="div-four" class="my-divs"></div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-two" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-three" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-four" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

    <script>
      function changeOpacity(divId) {
        document.getElementById(divId).style.opacity = 1;
        
        document.querySelectorAll('.my-divs:not([id="' + divId + '"])').forEach((e) => {
          e.style.opacity = 0;
        });
      }
    </script>
  </body>
</html>
0
投票

我在这段代码中添加了一些逻辑，我希望它有用：

      function hideAllDivs() {
        document.querySelectorAll(".my-divs").forEach((e) => {
          e.style.opacity = 0;
        });
      }

      document.addEventListener("DOMContentLoaded", hideAllDivs);

      function changeOpacity(divId) {
        hideAllDivs();
        document.getElementById(divId).style.opacity = 1;
      }
    
<div id="div-one" class="my-divs">One</div>
    <div id="div-two" class="my-divs">Two</div>
    <div id="div-three" class="my-divs">Three</div>
    <div id="div-four" class="my-divs">Four</div>

    <input type="radio" id="radio-one" name="div-radio" value="div-one"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-two" name="div-radio" value="div-two"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-three" name="div-radio" value="div-three"      
    onClick="changeOpacity(this.value);"/>
    <input type="radio" id="radio-four" name="div-radio" value="div-four"      
    onClick="changeOpacity(this.value);"/>

0
投票

一种更简单的方法是隐藏所有 div，然后定位您想要的特定 div 并显示它。

请注意，可以通过使用绑定在 JS< not in HTML, and also by using CSS classes to toggle opacity, and finally by removing the duplicate 

id
无效属性中的不显眼的事件处理程序来提高代码质量。

这是进行了上述更改的工作版本：

const divs = document.querySelectorAll('.my-divs');
const radios = document.querySelectorAll('input[type="radio"]')

const radioHandler = e => {
  hideAllDivs();
  document.querySelector(`#${e.target.value}`).classList.remove('hide');
}

const hideAllDivs = () => divs.forEach(div => div.classList.add('hide'));

radios.forEach(el => el.addEventListener('change', radioHandler));
.hide {
  opacity: 0;
}
<div id="div-one" class="my-divs">one</div>
<div id="div-two" class="my-divs">two</div>
<div id="div-three" class="my-divs">three</div>
<div id="div-four" class="my-divs">four</div>

<input type="radio" name="div-radio" value="div-one" />
<input type="radio" name="div-radio" value="div-two" />
<input type="radio" name="div-radio" value="div-three" />
<input type="radio" name="div-radio" value="div-four" />

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.