Question

我是jQuery的新手：
问题：点击下订单按钮后，我点击表格中的编辑按钮。编辑按钮假设从编辑切换到保存，但根据我的调试器，它无法识别按钮。我很感激任何建议。

HTML：

<!--jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form>
<fieldset>
<legend>Customer's Information</legend>
<!--asks for name-->
<label for="nameInput">Name</label>
<input type="text" id="nameInput" name="name" placeholder="John Doe" />
<br><br> 
Drink Order:    
<!--asks for coffee type-->
<select name="drinkType" id="drinkType">
<option value="#">Select Drink</option>
<option value="0">Tea  $2.25</option>
<option value="1">Coke  $2.50</option>
<option value="2">Coffee  $2.25</option>
</select>
<br><br>
<label for="subtotal">Subtotal :</label>
<input type="text" id="subtotal" disabled>
<br>
<label>&nbsp;</label>
<input type="button" id="placeOrderBtn" value="Place Order">    
<br><br>

</fieldset>
</form>
<br>
<h3 class = "hiddenReceipt">Receipt</h3>
<br>    
<table id = "receiptOrders">  
<thead>
<tr>
<th>Item Number</th>
<th>Name</th>
<th>Type of Drink</th>
<th>Subtotal</th>
<th>Edit/Save</th>
<th>Delete</th>
</tr>
</thead>
<tbody></tbody>
</table>

JS：

// if errors JavaScript will stop running
"use strict";

// Global Variables
var amt = 0; 
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes

// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder =[]; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal

// ready event: short way
// long way: $(document).ready(function()){
$(function() {    
// change
$("select").change(processOrder); // select tags

// calculates total cost
$("#placeOrderBtn").click(function() {
if ($("#drinkType").val() == "#") {
alert ("Please select a drink type");
} else {
var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
var totalList = 0; 
var subtotal = parseFloat($("#subtotal").val());
subtotal = subtotal.toFixed(2);  // converts to string, 2 numbers after decimal

// adds new item to the end of the array using push method
namesInputsHolder.push(nameInput); // adds name
drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type

subtotalHolder.push(subtotal); // adds subtotal cost

// i retrieves each element from the array
for (var i = 0; i < namesInputsHolder.length; i++) { 
totalList = "<tr><td>" + (i+1) + "</td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='button' value='Edit' class='editBtn'><input type='button' value='Save' class='saveBtn'></td><td><input type='checkbox'></td></tr>";    
 }

$("#receiptOrders > tbody").append(totalList); // table: tbody: children
}

// edits information
// edits information
$(".editBtn").click(function() {
$(this).hide(); // hides edit button
$(this).siblings(".saveBtn").show(); // displays save button
}); // end edit click

$(".saveBtn").click(function() {
$(this).hide(); // hides save button
$(this).siblings(".editBtn").show(); // displays edit button
}); // end save click

}); // end places order click

}); // end of ready event handler

 var processOrder = function() {
 // declaring local variables
 var amt = 0;
 var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page

 // shows output 

 //calls the function 
 var subtotal = drinkType(drink);
 subtotal = parseFloat(subtotal);
 // val() returns string, need to parse it into number first
 $("#subtotal").val(subtotal.toFixed(2)); 

 };

 // matches each drink type to each price
 // gets amount
 var drinkType = function(inDrink) {
 var amt = 0;
 switch(inDrink) {
 case 0:
 amt = drinkCosts[0]; // Tea
 break;
 case 1:
 amt = drinkCosts[1]; // Coke  
 break;
 case 2:
 amt = drinkCosts[2]; // Coffee
 break;
 }
 return amt;
 };

 // matches each drink type to each price
 // gets name for receipt purposes
 var drinkTypeName = function(inDrink) {
 switch(inDrink) {
 case 0:
 return "Tea"; 
 break;
 case 1:
 return "Coke";   
 break;
 case 2:
 return "Coffee";
 break;
 }
 };

Answer 1

我弄清楚我做错了什么。我找到了我的回答：toggle edit buttons with save and cancel buttons

我编辑了代码并更新了jsFiddle。

最初我把//编辑/保存功能放在ready事件下。它应该嵌套在#placeOrderBtn函数中。

JS：

// edits information
$(".editBtn").click(function() {
$(this).hide(); // hides edit button
$(this).siblings(".saveBtn").show(); // displays save button
}); // end edit click

$(".saveBtn").click(function() {
$(this).hide(); // hides save button
$(this).siblings(".editBtn").show(); // displays edit button
}); // end save click

jQuery没有识别在jQuery中创建的编辑按钮

1 个答案: