0
私は、クリックするとdivを開く複数のボタンがあります。異なるボタンのクリックに対応して複数の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{
\t height: 600px;
width: 600px;
background:lightgray;
display: none;
font-size: xx-large;
\t }
\t
\t
\t #seat{
\t height: 20px;
width: 40px;
background:pink;
\t font-size:10px;
\t
\t }
\t #booked{
\t height: 20px;
width: 60px;
background:gold;
\t font-size:10px;
\t font-weight:bold;
margin-top:10px;
\t
\t }
\t
\t #available{
\t height: 20px;
width: 60px;
background:pink;
\t font-size:10px;
\t font-weight:bold;
margin-top:10px; \t
\t }
\t
\t
\t
\t .button{
\t height: 20px;
width: 40px;
background:pink;
\t margin:10px;
\t color:black; \t
\t }
\t
#booking-form{
\t height: 200px;
width: 580px;
background:bisque;
margin-left:10px;
\t margin-right:10px;
display: none;
font-size: 15px;
\t
\t }<! 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="">
\t
<!-- 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'>
\t
<!---Font Awesome--->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
\t
\t <!--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'>
\t
</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>
\t <div id="search-box">
\t <div class="row">
\t <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>
\t <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>
\t <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>
\t <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>
\t <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>
\t
\t
<!-- 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>
2つのボタンをクリックすると2つのフォームが表示されますか？ –
はい、まさに私が意味するところです – Learner