Question

我通过检查两个单选按钮启用和禁用div（是和否）但是当我将id和class放在同一个div中并且当我使用两个div（一个用于id作为父级）时我遇到了问题和另一个作为孩子的班级）然后它的工作正常。

＆＃13;

function check1() {
  if (document.getElementById("isOutsourcing_yes").checked) {
    document.getElementById("s1").hidden = false;
  }
  if (document.getElementById("isOutsourcing_no").checked) {
    document.getElementById("s1").hidden = true;
  }
}

＆＃13;

.padd_left {
  display: inline-block;
  padding-left: 40px;
}

＆＃13;

<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" onchange="check1()" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no" onchange="check1()"> No
    
<div id="s1" class="padd_left">
    <h1>Hello..</h1>
</div>

＆＃13;

上面的代码无法正常工作，但当我更换下面的div时，它工作正常

<div  class="padd_left">
    <div id="s1">
        <h1>Hello..</h1>
    </div>
</div>

Answer 1

内联块不是隐藏的大粉丝。试试这个

document.getElementById("s1").style.visibility = "hidden"; // or visible

另请注意display属性与visibility属性之间的区别。如果您希望它从页面中完全消失而没有跟踪（除了在源代码中），您可以将其设置为display: none。 visibility: hidden会占用相同的空间，但不会渲染任何内容。根据您希望页面的显示方式，您必须做出决定。

https://www.w3schools.com/jsref/prop_style_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

这是更简单的解决方案，只使用纯CSS和HTML，没有javascript

＆＃13;

.padd_left {
  display: inline-block;
  padding-left: 40px;
}

#isOutsourcing_no:checked + #s1 h1{
  display: none;
}

＆＃13;

<input type="radio" name="isOutsourcing" id="isOutsourcing_yes" checked> Yes
<input type="radio" name="isOutsourcing" id="isOutsourcing_no"> No
    
<div id="s1" class="padd_left">
    <h1>Hello..</h1>
</div>

＆＃13;

同一组件中的js和css的html id和类不起作用

2 个答案: