Question

编辑更新完整代码：

我正在处理我的第一个Javascript案例，我被困在这里：

我有以下内容：

$(document).ready(function()
	{
		$('input, select').on('focus' ,swapPersonClass);

		//Blur = Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
	
		$('input, select').on("change", updateCart);
	}
);


// Functions
var swapPersonClass = function()
{
	var expression = $(this).attr('id');
	switch(expression) 
		{
			case "fullname":
				break;
			case "email":
				$("#arm").removeClass().addClass("pointemail");
				break;
			case "countpizzas":
				$("#arm").removeClass().addClass("pointamount");
				break;
			default:
				$("#arm").removeClass().addClass("pointothers");
		}
};

var updateCart = function () {
	var change = $(this).attr('id');
	console.log(change);
	
	$('input, select').each(function () 
	{
		switch (change) 
		{
			case "fullname":
				$("#displayname").text($('#fullname').val() + ',');
				break;
			
			case "countpizzas":
				aantalpizzas = $("#countpizzas").val();
				if (aantalpizzas > 1) {
					$('.plural').show();
				} else {
					$('.plural').hide();
				};
				$("#displayamount").text(aantalpizzas);
				console.log(aantalpizzas);
				break;
				
			case "pizzatype":
				PrijsPizza = $("#pizzatype option:selected").data("price");
				console.log(PrijsPizza);
				break;
						
			case "YesOption":
				$("#toppings").show();
				break;
				
			case "NoOption":
				$("#toppings").hide();
				break;
				
			case "toppings":
				updateTopping();
				break;
		};
		
			$("#currenttotal").text(aantalpizzas * PrijsPizza );
	});
};


var updateTopping = function () 
{
	$(".chk_topping").change(function()
	{
		var selected_topping = $(this).attr('data-value');
			switch(selected_topping)
			{
			case "salami":
				$("#currenttotal").text(aantalpizzas * PrijsPizza );
				PrijsTopping += 0.30;
				break
			}

	});
};

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>
	<div id="container">
    <header>
        <h1>Pizza Palace</h1>

    </header>
    <aside>
        <h2><span>Order details</span></h2>

        <div id="total">
            <p>Your current order total: &euro; <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>
		</label> 
		</div>
        <div>
            <label for="extratopping">Would you like extra topping? <br>
                <input id="YesOption" name="ExtraTopping" type="radio"> Yes 
				<input id="NoOption" name="ExtraTopping" type="radio"> No
       		</label>			
        </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?
            	<input id="delivery" name="delivery" type="date" required > </label>
            <label for="deliverytime">
            	<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 &copy; Basecamp </p></footer>
</div>

	<script type='text/javascript' src='assets/js/jquery.js'></script>
    <script type='text/javascript' src='assets/js/script.js'></script>
</body>
</html>

为什么我的复选框在选择时会一直告诉我它未定义？我真的不擅长使用javascript，所以我的代码可能是sh * t

Answer 1

试试这个 var selected_topping = $(this).data('value');

http://jsfiddle.net/f4Lghy6p/

Answer 2

找到它。

我在select en输入字段中搜索一个specefic ID： $（'input，select'）。on（“change”，updateCart）;

我的复选框位于DIV中，输入字段没有ID。

单击复选框时的Jquery事件处理

2 个答案: