在表单中隐藏具有不同 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>

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

hide various buttons with different div Javascript within a form

javascript

jquery

css

grails

gsp