Question

与我在一起,在我关于具体内容的《html法典》中规定,除非有人点击其中的内容,否则就没有显示内装内容(儿童节),因此,在我制造另一类的玩物中,只显示:在有人对我的内容表示怀疑时,即gle笑或添加这一类,然后显示儿童节点,但儿童们却不工作,因此! 这对我的工作班子很重要,而且做的是不收费的罚款,我想理解为什么。

我的《html守则》中,如上班,那类人就不希望显示,除非有人在电台上点击。

<div class="outer_content">
            <form>  
                <p>Choose the triangle type:</p>  
                <input class="App" id="Eqi" type="radio" name="Type" value="equilateral">Equilateral<br>  
                <div class="Appear" style="display: none;"></div>
                <input class="App" id="Rec" type="radio" name="Type" value="rectangle"> Rectangle <br>  
                <div class="Appear"></div>
                <input class="App" id="Iso" type="radio" name="Type" value="isosceles">Isosceles <br>
                <div class="Appear" ></div>  
           </form>
</div>

here my css code, where on .appear .drop, when someone clik on my radio, i would like to show my class appear and change the display:none to block, but it work ONLY when i typed !important(which already has been added)

.Appear {
    width: 100%;
    
    transition: padding 0.5s;
  }
  .Appear.drop {
    display: block !important;
    height: 20px;
    padding-top: 2px;
  }

在此,我执行我的守则。

let EquiConst = document.querySelector("#Eqi");
let RectConst = document.querySelector("#Rec");
let IsoConst = document.querySelector("#Iso");


let NewW = document.querySelectorAll(".Appear");



var radioButtons = document.querySelectorAll( input[type="radio"] );


//use code from Azoof Ahmed on https://stackoverflow.com/questions/77956842/any-idea-about-why-my-background-color-is-not-workin/77957267#77957267
//but added just a simple feature on work in all my 3 elements
function handleChange(e) {
  if(e.target.value ===  equilateral ) {
    NewW[0].classList.add("drop");
   
  } else {
    NewW[0].classList.remove("drop");
  }

  if(e.target.value ===  rectangle ) {
    NewW[1].classList.add("drop");
  } else {
    NewW[1].classList.remove("drop");
  }               
  
  if(e.target.value ===  isosceles ) {
    NewW[2].classList.add("drop");
  } else {
    NewW[2].classList.remove("drop");
  }
}

// trigger handler with all radio buttons
radioButtons.forEach(function(radioButton) {
    
        radioButton.addEventListener( change , handleChange);
    
    
});


//append child to my div appear for put some data in there

let sideEqui = document.createElement("input")
let child1 = NewW[0].appendChild(sideEqui);

i m 只是为了移植,就象新东西。

Answer 1

. . . . . . . . . . 然后,在 Java言中,你可以删除或补充那类隐藏。它简化了你的法典,消除了任何进口需求。

这里是经过这些修改而删除的法典。

let NewW = document.querySelectorAll(".Hidden")
let radioButtons = document.querySelectorAll( input[type="radio"] )

radioButtons.forEach( function(button) {
  button.addEventListener( change , handleChange);
} )

function handleChange( event ) {
  // event.target.nextElementSibling.classList.remove( "Hidden" )
  if( event.target.value == "equilateral" ) {
    NewW[0].classList.remove( "Hidden" )
  }
  else NewW[0].classList.add( "Hidden" )

  if( event.target.value == "rectangle" ) {
    NewW[1].classList.remove( "Hidden" )
  }
  else NewW[1].classList.add( "Hidden" )

  if( event.target.value == "isosceles" ) {
    NewW[2].classList.remove( "Hidden" )
  }
  else NewW[2].classList.add( "Hidden" )
}

.Hidden {
  display: none;
}

      <input type="radio" name="Type" value="equilateral">
      <div class="Hidden">equilateral</div>
      <input type="radio" name="Type" value="rectangle">
      <div class="Hidden">rectangle</div>
      <input type="radio" name="Type" value="isosceles">
      <div class="Hidden">isosceles</div>

友情链接