javascript - JS 表值更新 onchange

Question

我想更新我拥有的表单正下方的表格中的值。购物车中的数量增加和减少，下表中的值是匹配的。目前，增加/减少适用于表单的输入字段，但我无法在表格字段上获得任何更改。

表单字段的 JS-

/* Input incrementer*/
$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function () {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }
    $button.parent().find("input").val(newVal);
});
});

HTML -

        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label>Adults</label>
                    <div class="numbers-row">
                        <input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control" name="quantity">
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label>Children</label>
                    <div class="numbers-row">
                        <input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <table class="table table_summary">
        <tbody>
        <tr>
            <td>
                Adults
            </td>
            <script>
                function myFunction() {
                    var x = document.getElementById("adult").value;
                    document.getElementById("adultvalue").innerHTML = "&pound;" + x;
                }
            </script>
            <td class="text-right">
                <p id="adultvalue">2</p>
            </td>
        </tr>
        <tr>
            <td>
                Children
            </td>
            <td class="text-right">
                0
            </td>
        </tr>
        <tr>
            <td>
                Total amount
            </td>
            <td class="text-right">
                3x £52
            </td>
        </tr>
        <tr class="total">
            <td>
                Total cost
            </td>
            <td class="text-right">
                £154
            </td>
        </tr>

Answer 1

请检查下面的代码片段。我已尝试涵盖您的所有解决方案。在演示中我为 child 设置了 26 磅，为成人设置了 52 磅。您可以根据需要更改它。如果您发现任何疑问，请告诉我。

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');

//Here for example took £52 for adult and £26 for child. you can change as per your need.
$(".button_inc").on("click", function () {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
	if(oldValue==''){oldValue = 0;}
    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }
    $button.parent().find("input").val(newVal);
    //This line under
    $('#adultvalue').html('&pound;' + newVal);
	updatePerson();
});
function updatePerson() {	
	var adultQuant = $("#adult").val();
	if(adultQuant==""){adultQuant=0;}
	var childQuant = $("#child").val();
	if(childQuant==""){childQuant=0;}
	
	$("#adultvalue").html(adultQuant);
	$("#childvalue").html(childQuant);
	$("#adultcalc").html(adultQuant);
	$("#childcalc").html(childQuant);
	var totalCost = (adultQuant*52) + (childQuant*26);
	$("#totalcost").html(totalCost);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Adults</label>
			<div class="numbers-row">
				<input type="text" id="adult" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Children</label>
			<div class="numbers-row">
				<input type="text" id="child" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
</div>
<br>
<table class="table table_summary">
	<tbody>
	<tr>
		<td>
			Adults
		</td>
		<td class="text-right">
			<p id="adultvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Children
		</td>
		<td class="text-right">
			<p id="childvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Total amount
		</td>
		<td class="text-right">
			<p>Adults : <span id="adultcalc">0</span> x £52</p>
			<p>Child : <span id="childcalc">0</span> x £26</p>
		</td>
	</tr>
	<tr class="total">
		<td>
			Total cost
		</td>
		<td class="text-right">
			£<p id="totalcost">0</p>
		</td>
	</tr>
</table>