Question

背景：

我正在构建一个我们的应用程序将会是什么样子的模型，并添加一些JQuery来做一些普通的JS事情，比如隐藏，替换和动画某些元素。这个模型正在为我们的用户进行演示，因此我们可以在编写后端之前获得有关功能的反馈。

问题：

我希望能够隐藏我创建的某些面板的主体（注意：在示例中使用twitter bootstrap其面板主体）。完成后，将有多个具有不同选项的面板，用户可以单击箭头以显示或隐藏不同的选项。

现在我知道JQuery提供了一些我可以使用的插件（标签/手风琴）但是因为我刚刚离开学校并且还在学习我想不使用插件并且只是坚持使用JQuery API并构建我的自己的影响。

HTML：

<div class="panel panel-info find-replace-form">
<div class="panel-heading">Find and Replace - by Site Location or Number&nbsp;&nbsp;<button class="btn btn-default" id="hider-site"><span class="glyphicon glyphicon-chevron-down" ></span></button></div>
<div class="panel-body" id="hide-sitelocation">
  <h3>Search by Site Location <strong>OR</strong> Site Number:</h3>
  <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Site Location (Address)</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Location" style="margin:0 auto;"></div>
  </div>
  <h3><span class="label label-warning">OR</span></h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Site Number</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Number"></div>
  </div>
  <a href="#search" class="btn btn-default" id="search"><span class="glyphicon glyphicon-search"></span>&nbsp;Click to Search</a>
</form>
  <div id="hide-results">
  <h3 class="text-center">Results</h3>
  <h4 class="text-center"><span class="label label-default">Check the assets you would like to change Service Tag names.</span><h4>
<table class="table table-striped table-bordered text-center">
  <tr class="success">
    <td><div class="input-width-75">Asset to<br> rename?</div></td>
    <td>Site Number</td>
    <td>Site Location</td>
    <td>PID</td>
    <td>Service Tag</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-450</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-451</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-452</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-453</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-454</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-455</td>
  </tr>
</table>
</div>
<br>
<hr>
  <h3>Find and Replace Service Tags:</h3>

    <a href="#show-example" class="btn btn-danger btn-sm" id="show-example">Click for an explination</a>
    <br>
    <p class="alert alert-danger" id="hide-example">For example:<br>If you are moving assets from an Atlanta (ATL-) location to a New York City (NYC-) location and wanted to change the prefix for each service tag.</p>
    <br>
    <div class="form-group">
    <label for="exampleInputEmail1">FIND:</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="FIND: ATL-" style="margin:0 auto;"></div>
    </div>
    <div class="form-group">
    <label for="exampleInputEmail1">REPLACE WITH:</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="REPLACE WITH: NYC-" style="margin:0 auto;"></div>
    </div>
    <button class="btn btn-default" data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-retweet"></span>&nbsp;Click to Find &amp; Replace</button>
</div>
</div>

JQuery的：

$(document).ready(function(){
   $("#hide-results").hide();

   $("#search").click(function(){
    $("#hide-results").show(500);
   });
   $("#hide-example").hide();

   $("#show-example").click(function(){
    $("#hide-example").show(500);
   });

/* This is causing problems: */

   $("#hide-sitelocation").hide();
   $("#hider-site").click(function() {
      $("hide-sitelocation").show(500);
       $("#hider-site").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
   })


  });

JS小提琴： http://jsfiddle.net/7L5HC/1/

其他隐藏和显示效果很好但不适用于面板。

Answer 1

您遇到语法错误：

$("hide-sitelocation").show(500);

应该将ID定位为“隐藏网站位置”（基于我对您的标记的理解）：

$("#hide-sitelocation").show(500);

Answer 2

你有一个错字。将$("hide-sitelocation").show(500);更改为$("#hide-sitelocation").show(500);。（你忽略了选择器中的#。）

JQuery Show没有处理某些元素

2 个答案: