隐藏表单中具有不同div Javascript的各种按钮

Question

这是我的代码

按下可

隐藏 ，然后按下可显示

<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>

按下可隐藏，然后按以显示

<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>

我的表格

<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>

时尚的按钮隐藏了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>

按下可隐藏，然后按以显示 问题是，当有两个或多个模板时，JavaScript代码不起作用。

错误hidePerson is not defined，错误：hideFecha is not defined

Answer 1

你的代码有几个问题。

1.） 您有多个具有相同 id 的元素 （ solContri ）

2.） 你有一个额外的结束div 标签

您收到的错误是由于重复的 ID。

请参阅下面的代码。我相信这就是你所追求的。

$("#solContri-person").click(function(){
	$("#person").hide();
});
$("#solContri-fecha").click(function(){
	$("#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>