0
編輯更新全碼：jQuery的事件處理被點擊複選框時
我的工作我的第一個JavaScript的情況下，我在這裏卡住了：
我有以下幾點：
$(document).ready(function()
\t {
\t \t $('input, select').on('focus' ,swapPersonClass);
\t \t //Blur = Bind an event handler to the 「blur」 JavaScript event, or trigger that event on an element.
\t
\t \t $('input, select').on("change", updateCart);
\t }
);
// Functions
var swapPersonClass = function()
{
\t var expression = $(this).attr('id');
\t switch(expression)
\t \t {
\t \t \t case "fullname":
\t \t \t \t break;
\t \t \t case "email":
\t \t \t \t $("#arm").removeClass().addClass("pointemail");
\t \t \t \t break;
\t \t \t case "countpizzas":
\t \t \t \t $("#arm").removeClass().addClass("pointamount");
\t \t \t \t break;
\t \t \t default:
\t \t \t \t $("#arm").removeClass().addClass("pointothers");
\t \t }
};
var updateCart = function() {
\t var change = $(this).attr('id');
\t console.log(change);
\t
\t $('input, select').each(function()
\t {
\t \t switch (change)
\t \t {
\t \t \t case "fullname":
\t \t \t \t $("#displayname").text($('#fullname').val() + ',');
\t \t \t \t break;
\t \t \t
\t \t \t case "countpizzas":
\t \t \t \t aantalpizzas = $("#countpizzas").val();
\t \t \t \t if (aantalpizzas > 1) {
\t \t \t \t \t $('.plural').show();
\t \t \t \t } else {
\t \t \t \t \t $('.plural').hide();
\t \t \t \t };
\t \t \t \t $("#displayamount").text(aantalpizzas);
\t \t \t \t console.log(aantalpizzas);
\t \t \t \t break;
\t \t \t \t
\t \t \t case "pizzatype":
\t \t \t \t PrijsPizza = $("#pizzatype option:selected").data("price");
\t \t \t \t console.log(PrijsPizza);
\t \t \t \t break;
\t \t \t \t \t \t
\t \t \t case "YesOption":
\t \t \t \t $("#toppings").show();
\t \t \t \t break;
\t \t \t \t
\t \t \t case "NoOption":
\t \t \t \t $("#toppings").hide();
\t \t \t \t break;
\t \t \t \t
\t \t \t case "toppings":
\t \t \t \t updateTopping();
\t \t \t \t break;
\t \t };
\t \t
\t \t \t $("#currenttotal").text(aantalpizzas * PrijsPizza);
\t });
};
var updateTopping = function()
{
\t $(".chk_topping").change(function()
\t {
\t \t var selected_topping = $(this).attr('data-value');
\t \t \t switch(selected_topping)
\t \t \t {
\t \t \t case "salami":
\t \t \t \t $("#currenttotal").text(aantalpizzas * PrijsPizza);
\t \t \t \t PrijsTopping += 0.30;
\t \t \t \t break
\t \t \t }
\t });
};
var PrijsTopping = 0.30;
var aantalpizzas = 0;
var PrijsPizza = 0;<!DOCTYPE html>
<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css"/>
<link rel="stylesheet" href="assets/css/screen.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
\t <div id="container">
<header>
<h1>Pizza Palace</h1>
</header>
<aside>
<h2><span>Order details</span></h2>
<div id="total">
<p>Your current order total: € <strong id="currenttotal">0</strong></p>
</div>
<p><strong id="displayname"></strong> you are ordering <strong id="displayamount"></strong> pizza<span
class="plural">s</span></p>
<h3>Chosen toppings:</h3>
<div id="toppingmessage">
<p>No toppings selected</p>
<ul>
<li class="hide">Salami</li>
<li class="hide">Olives</li>
<li class="hide">Ansjovis</li>
</ul>
</div>
<h3>Your discount: </h3>
<p id="displaydiscount"></p>
</aside>
<form action="#" method="post">
<figure id="arm"></figure>
<figure id="face"></figure>
<fieldset class="personbody">
<form>
<div>
<label for="fullname">Full Name
<input id="fullname" name="fullnames" type="text" required autofocus>
</label>
</div>
<div>
<label for="email">Email
<input id="email" name="email" type="email" placeholder="Enter Your email" required>
</label>
</div>
<div>
<label for="howmany">How many pizzas would you like?<br><br>
<input id="countpizzas" name="countpizzas" type="number" min="1" max="3" step="1" value="0" required>
</label>
</div>
<div>
<label for="pizzatype">Which type of pizza would you like ? <br>
<select id="pizzatype"name="pizzatype">
<option data-price="4" value="S">Small</option>
<option data-price="5.5" value="M">Medium</option>
<option data-price="7" value="L">Large</option>
</select>
\t \t </label>
\t \t </div>
<div>
<label for="extratopping">Would you like extra topping? <br>
<input id="YesOption" name="ExtraTopping" type="radio"> Yes
\t \t \t \t <input id="NoOption" name="ExtraTopping" type="radio"> No
\t \t </label> \t \t \t
</div>
<div class="hide" id="toppings">
<label for="toppings">Which toppings would you like?</label>
<input type="checkbox" class="chk_topping" data-value="salami"> Salami
<input type="checkbox" class="chk_topping" data-value="olives"> Olives
<input type="checkbox" class="chk_topping" data-value="ansjovis"> Ansjovis
</div>
<div>
<label for="deliverydate">When do you want the pizza<span class="plural">s</span> to be delivered?
\t <input id="delivery" name="delivery" type="date" required > </label>
<label for="deliverytime">
\t <input id="Time" name="Time" type="time" required> </label>
</div>
<label for="discountcode">Do you have a discount code?
<input id="DiscountCode" name="DiscountCode" type="text" pattern="[1-9]{1}-[A-Z]{3}" title="The discount code should be a digit followed by a dash and then 3 uppercase letters" required>
</label>
</div>
</form>
<input type="submit" value="Place your order" name="placeorder"/>
</fieldset>
</form>
<footer><p>Graphics courtesy of © Basecamp </p></footer>
</div>
\t <script type='text/javascript' src='assets/js/jquery.js'></script>
<script type='text/javascript' src='assets/js/script.js'></script>
</body>
</html>爲什麼我的複選框一直告訴我，這是不確定的，當s選舉他們？ 我真的不擅長的JavaScript，所以我的代碼可能會奔忙
如果'case'部分和'updateTopping（）'函數被刪除，您的代碼似乎正在工作。真的有什麼問題？ – 2014-12-13 15:05:42
你的代碼似乎工作正常。 http://jsfiddle.net/fcs8c362/。您可能需要逐行調試以查看異常情況。唯一的另一件事是元素不會被加載到DOM中，但這取決於您擁有的其他代碼。 – haxtbh 2014-12-13 15:10:36