用jquery对laravel 8中每个产品的2个输入值求和

Question

我对我的项目有一个问题，我有2个输入，我想动态添加以显示在按下按钮时的警报值，每个产品有2个输入，但我不能使它与所有它们一起工作，它只添加了第一个产品的前2个输入，我希望你能帮助我:

刀片上的代码

@foreach($productsArray['data'] as $product)
<div class="col-sm-6">
<label for="stock-modal" class="col-form-label">Precio Base:</label>
<input type="number" class="form-control" name="stockPriceprueba" value="{{ $product['precioBase'] }}" disabled>
</div>
<div name="prueba" class="col-sm-6">
<label for="stock-modal" class="col-form-label">Aumento sobre el precio base:</label>
<div class="input-group">
<input id="prueba" type="number" class="form-control" name="priceModalprueba">
</div>
</div>
<button class="btn btn-outline-primary" type="button" name="button-addonprueba">Calcular Precio</button>
@endforeach

jQuery代码

$("button[name=button-addonprueba]").click(function () {
valor1 = parseFloat($("input[name=priceModalprueba]").val());
valor2 = parseFloat($("input[name=stockPriceprueba]").val());
TotalSuma = valor1 + valor2;
alert(TotalSuma);
});

Answer 1

在容器行(或任何其他您想要的类)中包装每个集合。然后，当你点击一个按钮时，使用closest()然后find()遍历该行内的输入。

注意你不能在一个页面中重复元素id。为了使选择器更简单，我使用了一些常见的类而不是名称

$('.button-addonprueba').click(function(e) {
const $row = $(this).closest('.row'),
price = $row.find('input.price').prop('valueAsNumber') || 0,
stock = $row.find('input.stock').prop('valueAsNumber') || 0,
total = price + stock;
console.log('Product Total =', total)
})

.row {
border: 3px solid #ccc;
margin: .5em;
padding: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- php loop to create html-->
<div class="row">
<div class="col-sm-6">
<label for="stock-modal" class="col-form-label">Precio Base:</label>
<input type="number" class="form-control stock" name="stockPriceprueba" value="10" disabled>
</div>
<div name="prueba" class="col-sm-6">
<label for="stock-modal" class="col-form-label">Aumento sobre el precio base:</label>
<div class="input-group">
<input type="number" class="form-control price" name="priceModalprueba" value="6">
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-outline-primary button-addonprueba" type="button">Calcular Precio</button>
</div>
</div>
<!-- new row from php loop -->
<div class="row">
<div class="col-sm-6">
<label for="stock-modal" class="col-form-label">Precio Base:</label>
<input type="number" class="form-control stock" name="stockPriceprueba" value="100" disabled>
</div>
<div name="prueba" class="col-sm-6">
<label for="stock-modal" class="col-form-label">Aumento sobre el precio base:</label>
<div class="input-group">
<input type="number" class="form-control price" name="priceModalprueba" value="66">
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-outline-primary button-addonprueba" type="button">Calcular Precio</button>
</div>
</div>

Answer 2

理想情况下，您需要在代码中引入一个计数器，以便最终获得stockPriceprueba0、stockPriceprueba1等名称，然后在jQuery部分中执行相同的循环。你可以在刀片模板中使用一个标准的php块来实现这一点。

<?php i=0?>
@foreach($productsArray['data'] as $product)
<div class="col-sm-6">
<label for="stock-modal" class="col-form-label">Precio Base:</label>
<input type="number" class="form-control" name="stockPriceprueba{{$i}}" value="{{ $product['precioBase'] }}" disabled>
</div>
<div name="prueba" class="col-sm-6">
<label for="stock-modal" class="col-form-label">Aumento sobre el precio base:</label>
<div class="input-group">
<input id="prueba" type="number" class="form-control" name="priceModalprueba{{$i}}">
</div>
</div>
<button class="btn btn-outline-primary" type="button" name="button-addonprueba">Calcular Precio</button>
<?php $i++ ?>
@endforeach

类似的，在jQuery部分你可以:

$("button[name=button-addonprueba]").click(function () {
TotalSuma = 0;
@for($x=0; $x< count($productsArray); $x++)
valor1 = parseFloat($("input[name=priceModalprueba{{$x}}]").val());
valor2 = parseFloat($("input[name=stockPriceprueba{{$x}}]").val());
TotalSuma += valor1 + valor2;
@endfor

alert(TotalSuma);