HTML - DIV 不隐藏答案

【问题标题】：HTML - DIV not hidingHTML - DIV 不隐藏
【发布时间】：2017-01-09 12:23:51
【问题描述】：

我有一个基于 Spring Web 模型-视图-控制器 (MVC) 框架的项目。 Spring Web 模型-视图-控制器（MVC）框架的版本是 3.2.8 我的 JSP 中有这段代码

  <div class="col-md-12" id="secondSignatoryDivId" >                                                    
    <table width="100%">
        <thead>
            <tr>
                <th><b>First name</b></th>
                <th><b>Last name</b></th>
                <th><b>Position</b></th>
                <th><b>Title</b></th>
                <th><b>Actions</b></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.lastname}"  <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.position}"  <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>
                <td><input type="text" value="${deviceForm.device.secondSignatory.title}"     <c:if test="${readonly}">disabled="disabled"</c:if> class="form-control"/></td>                                                               
                <td>Delete</td>                                                     
            </tr>
        </tbody>
    </table>
</div>

<c:if test="${empty applicationForm.application.secondSignatory}">
    <script>
    alert ('lalalal');
    $('#secondSignatoryDivId').hide();
    </script>
</c:if>

我看到了警报，但 div 没有隐藏！

【问题讨论】：

浏览器控制台是否出错？代码没有明显错误
alert($('#secondSignatoryDivId').length) 运行它，看看它是否给出 1。
好像$ is undefined?
另外检查一下，你已经包含了 jQuery。
document.querySelector('#secondSignatoryDivId').style.display = 'none';

标签： javascript jquery html jsp spring-mvc

【解决方案1】：

您正在使用 jQuery，您应该在 html 文件中包含 jQuery：

alert('lalalal');
$('#secondSignatoryDivId').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="secondSignatoryDivId">
  <table width="100%">
    <thead>
      <tr>
        <th><b>First name</b>
        </th>
        <th><b>Last name</b>
        </th>
        <th><b>Position</b>
        </th>
        <th><b>Title</b>
        </th>
        <th><b>Actions</b>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="text" value="${deviceForm.device.secondSignatory.firstname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
        <td>
          <input type="text" value="${deviceForm.device.secondSignatory.lastname}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
        <td>
          <input type="text" value="${deviceForm.device.secondSignatory.position}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
        <td>
          <input type="text" value="${deviceForm.device.secondSignatory.title}" <c:if test="${readonly}">disabled="disabled"</c:if>class="form-control"/></td>
        <td>Delete</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

如果只是为了隐藏元素，最好使用 css：

<c:if test="${empty applicationForm.application.secondSignatory}">
    <style>
       #secondSignatoryDivId.col-md-12 { display:none; }
    </style>
</c:if>

【讨论】：