JQuery文件准备奇怪的数组行为

Question

数组有问题，我用于jquery对象。当我使用那个数组时，数组元素0正在显示，但是elemnt 1就像没有动作一样。什么可能出错？所以我正在使用数组： 表单[0] .show（）完美运行！ 形式[1] .show（）当它独自一人时 - 没有反应！

问题区域在JavaScript中：

function repClick(cid) {

	if (cid.charAt(0) == 'e') {
		cid = cid.substr(1);
        // this works
        forms[0].show();
        /* this works too
        forms[0].show();
        forms[1].show();
        */
        /* this does not work!!!
        forms[1].show();
        */
	}
}

$(document).ready(function() {

	forms = [$('#addForm'), $('#editForm')];
	forms[0].hide();
	forms[1].hide();
});

#section {
	float:left;
	width: 1073px;
	min-height: 600px;
	margin: 10px 10px 10px 10px;
	border:1px solid #C8C8C8;
}
.content {
	display:table;
	padding-top: 100px;
	padding-bottom: 10px;
	font-size: 20px;
	margin: 0 auto;
	font-family: arial;
}

.cTitle {
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	font-weight: bold;
	background: #C8C8C8;
}
.c {
	text-align: center;
	padding:20px;
	border:thin solid #C8C8C8;
	
}
table {
	width: 100%;
	border: solid black;
}
table th {
	padding-top:4px;
	padding-bottom: 4px;
	background:black;
	color: white;
	text-align: left;
}
table td {
	padding-top:4px;
	padding-bottom: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section">
  <div class="content">
    <div class="cTitle">Items</div>
    <div class="c">
      <table>
        <tbody>
          <tr>
            <th>Item Name</th>
            <th>Created</th>
            <th>Updated</th>
            <th></th>
            <th></th>
          </tr>
          <tr>
            <td>Item1</td>
            <td>Thu, 24 Mar 2016 08:13:18</td>
            <td>Thu, 24 Mar 2016 08:13:18</td>
            <td>
              <button id="e4" onclick="repClick(this.id);">Edit</button>
            </td>
            <td><button id="d4">Delete</button></td>
          </tr>
          <tr>
            <td>Item2</td>
            <td>Wed, 23 Mar 2016 18:19:13</td>
            <td>Wed, 23 Mar 2016 18:19:13</td>
            <td>
              <button id="e3" onclick="repClick(this.id);">Edit</button>
            </td>
            <td><button id="d3">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="content" id="add">
    <div class="cTitle">Add new item</div>
    <div class="c">
      <button id="addBtn">Add</button>
    </div>
  </div>
  <div class="content" id="addForm" style="display: none;">
    <div class="cTitle">New entry</div>
    <div class="c">
      <div class="form">
        <form id="items" action="add_item.php" method="post">
          <p>Item Name:</p><p><input type="text" name="name"></p>
          <p>Some stuff:</p><p><input type="text" name="times" size="100"></p>
          <p>Some stuff 2:</p>
          <p><input type="text" name="types" size="100"></p>
          <p><input type="submit" value="Submit"></p>
        </form>
      </div>
      <div id="rResponse"></div>
    </div>
    <div class="content" id="editForm" style="display: table;">
      <div class="cTitle">Edit entry ID:</div>
      <div class="c">
        <div class="form">
          <form id="rings" action="edit_item.php" method="post">
	    			<p>Item name:</p><p><input type="text" name="name"></p>
	    			<p>Some stuff 1:</p><p><input type="text" name="times" size="100"></p>
	    			<p>Some stuff 2:</p><p><input type="text" name="types" size="100"></p>
					<p><input type="submit" value="Отправить"></p>
					</form>
				</div>
        <div id="rResponse"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

您当前的HTML嵌套在editForm内addForm。因此，如果addForm可见，您可以毫无问题地切换editForm。但是，如果addForm被隐藏，无论您对editForm做什么，它都会被隐藏。

解决方案只是修复您的HTML。