我有多个按钮可以在点击时打开div。
会发生什么：点击按钮，'form'div会打开一次。
应该发生什么：每次点击按钮时，'form'div应该打开。对应按钮点击，“form”div应该打开。
我研究过并发现循环应该用于此（就像把showDiv（）放在循环中一样）但是我该如何实现呢？
/*For opening search-box*/
$('#click').click(function()
{
$("#search-box").toggle();
});
/* For opening the form*/
function showDiv() {
document.getElementById('booking-form').style.display = "block";
}#search-box{
height: 600px;
width: 600px;
background:lightgray;
display: none;
font-size: xx-large;
}
#seat{
height: 20px;
width: 40px;
background:pink;
font-size:10px;
}
#booked{
height: 20px;
width: 60px;
background:gold;
font-size:10px;
font-weight:bold;
margin-top:10px;
}
#available{
height: 20px;
width: 60px;
background:pink;
font-size:10px;
font-weight:bold;
margin-top:10px;
}
.button{
height: 20px;
width: 40px;
background:pink;
margin:10px;
color:black;
}
#booking-form{
height: 200px;
width: 580px;
background:bisque;
margin-left:10px;
margin-right:10px;
display: none;
font-size: 15px;
}<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<!-- Custom CSS -->
<link href="custom_css/main.css" rel="stylesheet" type='text/css'>
<!---Font Awesome--->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<!--font family-->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
</head>
<body>
<button type="submit" class="btn btn-default btn-success btn-block" id="click" value="Show/Hide"><span class="glyphicon glyphicon-off"></span>Search</button>
<div id="search-box">
<div class="row">
<div class="col-md-8">
<table>
<tr>
<td><input type="button" class="button" value="1" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="2" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="3" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="4" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="5" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="6" onclick="showDiv()"/></td>
</tr>
<tr>
<td><input type="button" class="button" value="7" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="8" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="9" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="10" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="11" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="12" onclick="showDiv()"/></td>
</tr>
<tr>
<td><input type="button" class="button" value="13" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="14" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="15" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="16" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="17" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="18" onclick="showDiv()"/></td>
</tr>
<tr>
<td><input type="button" class="button" value="19" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="20" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="21" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="22" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="23" onclick="showDiv()"/></td>
<td><input type="button" class="button" value="24" onclick="showDiv()"/></td>
</tr>
</table>
</div><!--row div -->
<div class="col-md-4">
<div class="row">
<div class="col-md-5" id="booked">Booked</div>
<div class="col-md-2"></div>
<div class="col-md-5" id="available">Available</div>
</div>
</div>
</div><!--div grid row-->
<div id="booking-form" style="display:none;">
<form class="form-inline">
<div class="form-group" style="margin:10px;">
<label for="firstName"><span class="glyphicon glyphicon-user"></span>Name</label>
<input type="text" class="form-control" id="firstName" placeholder="Name" required>
</div>
</div><!--booking form-->
</div><!--search-box-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<!--Custome Jquery-->
<script src="custom_js/main.js"></script>
</body>
</html>
答案 0 :(得分：2)
删除按钮的所有“onclick”。要在单击按钮时附加调用函数showDiv的行为：
$('table tr td .button').on('click',function(e)
{
showDiv();
});
jQuery中的选择器获取所有元素。
您还可以添加一个类以了解何时打开表单，并使用条件点击事件检查，单击了哪个按钮$(this)等等...
<强>更新
要添加表单，而不是显示/关闭表单，您必须附加html代码：http://api.jquery.com/append/
更新2
每次调用 showDiv 时，您都可以克隆#booking-form元素，然后添加到div。我用一个工作示例制作了一个codePen：
https://codepen.io/anon/pen/aNxbmK
如何让每个表单都有不同的ID？
好吧，在点击事件中，您可以使用此方法获取按钮值并传递给 showDiv 函数，并在添加到#others div之前更改ID。