0
Ich habe mehrere Tasten, die das Div auf Klick öffnen.Wie öffne ich ein Div mehrere Male entsprechend verschiedenen Tastenklicks
Was passiert: 'Form' div öffnet einmal, beim Klicken auf die Schaltfläche.
Was sollte passieren: 'form' div sollte bei jedem Klick auf eine Schaltfläche geöffnet werden. Ein "Formular" -Div sollte sich öffnen, entsprechend einem Klick auf die Schaltfläche.
Ich recherchierte und fand, dass Schleife dafür verwendet werden sollte (etwas wie das showDiv() in die Schleife), aber wie implementiere ich es?
/*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>
Sie meinen, wenn ich zwei Tasten klickte, würde es zwei Formen zeigen? –
Ja, das ist genau das, was ich meine – Learner