0
我有一个列出所有用户发票的表格，并且每个发票都包含一个付款按钮以允许他们支付账单。使用JavaScript来抓取多个ID的
我目前有一个循环遍历每张发票并在自己的行中显示每张发票，当用户去点击付款按钮时，JavaScript会显示一个选择框来使用保存的卡或新卡，如果用户选择保存的卡片，则JavaScript将显示包含其保存的卡片的另一个选择框，如果选择了新卡片，则将显示其他输入字段，当选择保存的卡片时显示和隐藏部分，或者新卡只适用于表格的第一行，没有其他行可以使用该JavaScript，我相信它是因为JavaScript抓住了第一个ID并在那里停下来。如何正确执行此操作以获取所有ID并在用户在每张发票上选择已保存的卡或新卡时运行代码？
我创建了一个JSFiddle来显示我的确切情况，有人可以修改它到它的工作位置吗？我真的很感激！ https://jsfiddle.net/s0fbrcw6/1/
payments.blade.php
@if($payments)
@foreach($payments as $payment)
<tr>
<td><a href="">${{number_format(($payment->price /100), 2, '.', ' ')}}</a></td>
<td>{{$payment->product_name}}</td>
<td>{{$payment->created_at->toFormattedDateString()}}</td>
<td>{{$payment->created_at->addMonth()->toFormattedDateString()}}</td>
<td>{{$payment->reoccurring}}</td>
<td>{{$payment->status}}</td>
@if($payment->status == "Paid")
@else
<td>
<div class="add-payment-container">
<button class="toggle-add-payment mdl-button mdl-js-button mdl-js-ripple-effect pull-right btn-info">
@if($payment->reoccurring == "Yes")
Subscribe
@else
Pay Here
@endif
</button>
<div class="add-payment">
</br>
<form action="{{'/users/payment'}}" method="post"
id="checkout-form">
<input type="text" name="price" class="hidden"
value="{{$payment->price}}">
<input type="text" name="productName" class="hidden"
value="{{$payment->product_name}}">
<input type="text" name="paymentID" class="hidden"
value="{{$payment->id}}">
<input type="text" name="reoccurring" class="hidden"
value="{{$payment->reoccurring}}">
<div class="row">
<div class="col-sm-4">
<div id="paymentMethodDiv"
class="form-group label-floating">
{!! Form::label('paymentMethod', 'Payment Method') !!}
</br>
{!! Form::select('paymentMethod', ['Saved Card'=>'Saved Card','New Card'=>'New Card'], null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'paymentMethod'])!!}
</div>
</div>
<div class="col-sm-4">
<div id="savedCardsDiv" class="form-group label-floating" style="display: none;">
{!! Form::label('card', 'Previous Cards') !!}
</br>
{!! Form::select('card', $cardLast4, null, ['class' => 'browser-default mdl-selectfield', 'placeholder' => 'Choose Option', 'id' => 'savedCards'])!!}
</div>
</div>
<div class="col-md-4">
<div id="cardHolderNameDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Holder
Name</label>
<input type="text" id="card-name"
class="form-control">
</div>
</div>
<div class="col-md-4">
<div id="cardNumberDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Card Number</label>
<input type="text" id="card-number"
class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div id="expirationMonthDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration
Month</label>
<input type="text" id="card-expiry-month"
class="form-control">
</div>
</div>
<div class="col-md-5">
<div id="expirationYearDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">Expiration Year</label>
<input type="text" id="card-expiry-year"
class="form-control">
</div>
</div>
<div class="col-md-2">
<div id="cvcDiv" class="form-group label-floating" style="display: none;">
<label class="control-label">CVC</label>
<input type="text" id="card-cvc"
class="form-control">
</div>
</div>
</div>
{{csrf_field()}}
<button type="submit" class="btn btn-primary pull-right">Make
Payment
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</td>
@endif
</tr>
<script>
var paymentMethodSelect = document.getElementById('paymentMethod');
paymentMethodSelect.onchange = function() {
if (paymentMethodSelect.value == 'Saved Card') {
document.getElementById("savedCardsDiv").style.display = "block";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
} else if (paymentMethodSelect.value == 'New Card') {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "block";
document.getElementById("cardNumberDiv").style.display = "block";
document.getElementById("expirationMonthDiv").style.display = "block";
document.getElementById("expirationYearDiv").style.display = "block";
document.getElementById("cvcDiv").style.display = "block";
} else {
document.getElementById("savedCardsDiv").style.display = "none";
document.getElementById("cardHolderNameDiv").style.display = "none";
document.getElementById("cardNumberDiv").style.display = "none";
document.getElementById("expirationMonthDiv").style.display = "none";
document.getElementById("expirationYearDiv").style.display = "none";
document.getElementById("cvcDiv").style.display = "none";
}
};
</script>
真的直线前进。您尝试在页面上多次使用ID。 ID是独一无二的。改为使用带有'querySelectorAll（）'的类。 – Ohgodwhy
谢谢你的回应！我不知道这些身份证，以及他们应该如何独特，非常好的东西！那么，我怎么才能得到被点击的行的索引值，以显示正确的div集？你能解释还是展示一个例子？ – rapid3642