为什么这个jQuery'最接近'的代码不起作用？

When I click the 'Generate' button I'd like the #payment_reference field value to be generated as per the code. I think the code makes it pretty much clear what I want it to do but for some reason it won't work :(

当我单击“生成”按钮时,我希望根据代码生成#payment_reference字段值。我认为代码使我非常清楚我想要它做什么但由于某种原因它将无法正常工作:(

I've added an alert for testing purposes but it just outputs undefined

我为测试目的添加了一个警报,但它只是输出undefined

$( document ).ready(function() {
// generate payment reference

$( "#generate_payment_reference" ).click(function() {
    $( ".amount_received" ).each(function( index ) {
		var thisAmount = parseFloat($(this).val());
		var paymentRef = '';
        if (thisAmount > 0) {
            paymentRef += $(this).closest(".invoice_reference").val();
			alert($(this).closest(".invoice_reference").val());
        }
		$('#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>&pound;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 (&pound;)</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>&pound;25.20</td>
      <td>&pound;0.00</td>
      <td>&pound;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>&nbsp;
        <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>&pound;25.20</td>
      <td>&pound;0.00</td>
      <td>&pound;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>&nbsp;
        <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 (&pound;):</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>&nbsp;
        <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>

2 个解决方案

#1

This is because your .invoice_reference element is not an ancestor of your .amount_received element. Instead you can go up to the tr element and use find() to pull the .invoice_reference within that:

这是因为.invoice_reference元素不是.amount_received元素的祖先。相反,您可以转到tr元素并使用find()来拉动.invoice_reference:

$(this).closest('tr').find(".invoice_reference").val()

#2

If $(".amount_received").length is equal to $(".invoice_reference").length, try using .eq() with parameter index; moving $('#payment_reference').val(paymentRef); outside of .each() to prevnt value from being overwritten. Note, duplicate closing </td>s at html.

如果$(“。amount_received”)。length等于$(“。invoice_reference”)。length,请尝试使用带参数索引的.eq();移动$('#payment_reference')。val(paymentRef);在.each()之外的被覆盖的普遍价值。请注意,在html处重复关闭 。

Note also, not certain is expected result is concatenated string or addition of values at paymentRef variable ?

还要注意,不一定是预期结果是连接字符串还是在paymentRef变量中添加值?

$( document ).ready(function() {
// generate payment reference

$( "#generate_payment_reference" ).click(function() {
  var paymentRef = "";
    $( ".amount_received" ).each(function( index ) {
		var thisAmount = parseFloat($(this).val());
		//var paymentRef = '';
        if (thisAmount > 0) {
            paymentRef += $(".invoice_reference").eq(index).val();
        }
		
    });
  $('#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>&pound;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 (&pound;)</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>&pound;25.20</td>
    <td>&pound;0.00</td>
	<td>&pound;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>&nbsp;<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>&pound;25.20</td>
    <td>&pound;0.00</td>
	<td>&pound;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>&nbsp;<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>

  </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 (&pound;):</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>&nbsp;<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>