3
Когда я нажимаю кнопку «Создать», мне нужно, чтобы значение поля #payment_reference генерировалось в соответствии с кодом. Я думаю, что код делает это в значительной степени ясно, что я хочу, чтобы это сделать, но по какой-то причине он не будет работать :(Почему этот jQuery «ближайший» код не работает?
Я добавил alert для целей тестирования, но он просто выводит undefined
$(document).ready(function() {
// generate payment reference
$("#generate_payment_reference").click(function() {
$(".amount_received").each(function(index) {
\t \t var thisAmount = parseFloat($(this).val());
\t \t var paymentRef = '';
if (thisAmount > 0) {
paymentRef += $(this).closest(".invoice_reference").val();
\t \t \t alert($(this).closest(".invoice_reference").val());
}
\t \t $('#payment_reference').val(paymentRef);
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset>
<legend>Client Details</legend>
<table class="nobord">
<tr>
<td>Type:</td>
<td>Landlord </td>
</tr>
<tr>
<td>Name:</td>
<td>Mr XXX</td>
</tr>
<tr>
<td>Client Bank Account Balance:</td>
<td>£387.68</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Outstanding Invoice Details</legend>
<table class="solid" style="margin:5px;">
<tr>
<th>Invoice #</th>
<th>Date</th>
<th>Due Date</th>
<th>Invoice Total</th>
<th>Amount Paid</th>
<th>Amount Due</th>
<th>Amount Received (£)</th>
</tr>
<tr>
<td><a href="view_invoice.php?invoice_id=496" target="_blank">496</a>
<input type="text" class="invoice_reference" value="496">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required>
<button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="496">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119">
</td>
</tr>
<tr>
<td><a href="view_invoice.php?invoice_id=497" target="_blank">497</a>
<input type="text" class="invoice_reference" value="497">
</td>
<td>14/01/16</td>
<td>14/01/16</td>
<td>£25.20</td>
<td>£0.00</td>
<td>£25.20
<input type="hidden" name="amount_outstanding[]" value="25.20">
</td>
<td>
<input type="number" name="amount_received[]" class="amount_received" value="0.00" max="25.20" required>
<button class="pay_in_full" type="button">Pay in Full</button>
<input type="hidden" name="invoice_id[]" value="497">
<input type="hidden" name="invoice_tenancy_id[]" value="40">
<input type="hidden" name="invoice_property_id[]" value="119">
</td>
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Payment Details</legend>
<table class="nobord">
<tr>
<td>
<label for="invoice_payment_date">Date:</label>
</td>
<td>
<input type="date" id="invoice_payment_date" name="invoice_payment_date" class="datepicker2months" ondblclick="this.value='2016-01-14';" readonly required>
</td>
</tr>
<tr>
<td>
<label for="total_amount_received">Total Amount Received (£):</label>
</td>
<td>
<input type="number" id="total_amount_received" name="total_amount_received" readonly required>
<input type="hidden" id="client_bank_account_balance" name="client_bank_account_balance" value="387.68" required>
</td>
</tr>
<tr>
<td>
<label for="payment_reference">Payment Reference:</label>
</td>
<td>
<input type="text" id="payment_reference" readonly>
<button id="generate_payment_reference" type="button">Generate</button>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_use_balance">Pay from Client Bank Account Balance:</label>
</td>
<td>
<select id="invoice_payment_use_balance" name="invoice_payment_use_balance" required>
<option value="">Please Select</option>
<option value="0">No</option>
<option value="1" selected>Yes</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_method">Method:</label>
</td>
<td>
<select id="invoice_payment_method" name="invoice_payment_method" required>
<option value="">Please Select</option>
<option value="2" selected>Bank Transfer</option>
<option value="1">Cash</option>
<option value="3">Cheque</option>
<option value="4">Credit Card</option>
<option value="5">Debit Card</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="invoice_payment_notes">Notes:</label>
</td>
<td>
<textarea id="invoice_payment_notes" name="invoice_payment_notes" rows="6" cols="40"></textarea>
</td>
</tr>
</table>
</fieldset>
[ '.closest()'] (https://api.jquery.com/closest/) ищет ближайший предок * * элемент. '.invoice_reference' не является предком. Вам нужно будет сделать еще один [обход дерева] (https://api.jquery.com/category/traversing/tree-traversal/). – Blazemonger
Если вы убираете HTML-код (который я только что сделал в JSFiddle с кнопкой 'Tidy'), иерархия становится немного понятнее. –