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

【问题标题】：hide various buttons with different div Javascript within a form在表单中隐藏具有不同 div Javascript 的各种按钮
【发布时间】：2016-02-02 19:51:24
【问题描述】：

这是我的代码

按隐藏，再按显示

<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

【问题讨论】：

我认为你隐藏的逻辑太复杂了。为什么不直接添加一个名为“hidden”的类，然后在需要时使用 jQuery 添加/删除该类？然后在 CSS 中隐藏的类将使用 display:none.
我想做的是用按钮隐藏和显示 div。例如：按下按钮隐藏 div 。按下按钮显示 div。问题是当有两个或更多模板时。 javascript 代码不起作用。

标签： javascript jquery css grails gsp

【解决方案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>

【讨论】：