cacher différents boutons avec différentes div Javascript dans un formulaire

Question

ceci est mon code

appuyez sur pour masquer, puis appuyez sur pour afficher

<script type="text/javascript"> 
    var clic = 1; 
    function hideFecha(){ 
     if (clic == 1){ 
      document.getElementById('fecha').style.display='none'; 
      clic = clic + 1; 
     } else { 
      document.getElementById('fecha').style.display = 'block';  
      clic = 1; 
     } 
    } 
</script> 

// appuyez sur pour masquer, puis appuyez sur pour afficher

<script type="text/javascript"> 
    var click = 1; 
    function hidePerson(){ 
     if (click == 1){ 
      document.getElementById('person').style.display='none'; 
      click = click + 1;} 
     else{ 
      document.getElementById('person').style.display = 'block';  
      click = 1; 
     } 
    } 
</script> 

ma forme

<g:form controller="SoliCon" action="save" > 
    <fieldset id="solContri" class="form"> 
     <div> 
      <fieldset id="solContri" class="buttons"> 
       <center><input type="button" name="fecha" value="FECHA" onclick="hideFecha()"/></center> 
      </fieldset> 
      <div id="fecha" >  
       <g:render template="formfecha"/> 
       <br> 
      </div> 
     </div> 

bouton élégant cache la div

 <div> 
      <fieldset id="solContri" class="buttons"> 
       <input type="button" name="person"  value="PERSON"    onclick="hidePerson()"/> 
      </fieldset> 
      <div id="person"> 
       <g:render template="persona"/> 
      </div> 
     </div> 
    </div> 
</fieldset> 
</g:form> 

Appuyez sur pour cacher puis appuyez sur pour afficher le hic est que quand il y a deux ou plusieurs modèles de code javascript ne fonctionne pas.

ERREUR hidePerson is not defined, ERREUR: hideFecha is not defined

Answer 1

Vous avez un problèmes de couple avec votre code.

1.) Vous avez plusieurs éléments avec le même identifiant (solContri)

2.) Vous avez une balise div de fermeture supplémentaire

Les erreurs que vous recevez étaient dus à l'ID en double.

Voir le code ci-dessous. Je crois que c'est ce que vous recherchez.

$("#solContri-person").click(function(){ 
 
\t $("#person").hide(); 
 
}); 
 

 
$("#solContri-fecha").click(function(){ 
 
\t $("#fecha").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<fieldset id="solContri" class="form"> 
 
    <div> 
 
    <fieldset id="solContri-fecha" class="buttons"> 
 
     <center><input type="button" name="fecha" value="FECHA" /></center> 
 
    </fieldset> 
 
    <div id="fecha" >  
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <fieldset id="solContri-person" class="buttons"> 
 
     <input type="button" name="person"  value="PERSON" /> 
 
    </fieldset> 
 
    <div id="person"> 
 
<br/> 
 
    </div> 
 
    </div> 
 
</fieldset>