Javascript 如何计算产品'；将其添加到购物车之前的总价是多少？

希望你做得很好

我正在建立一个电子商务网站。 每个产品都有几个属性，每个属性值都有自己的价格，这些价格将添加到原始价格中

例如：产品价格=25$，所选属性颜色的值为“红色”价格=5$，所选宽度=16英寸，价格=7$

在“产品详细信息”页面中，客户必须在将产品添加到购物车之前选择每个属性值

我正在尝试使用选定的属性值prices计算产品的总价格

代码如下：

<var class="price h3 text-success">
    <span class="currency">{{ config('settings.currency_symbol') }}</span>
<span class="num" id="productPrice">{{ $product->price }}</span>
</var>

@foreach($attributes as $attribute)

    <dt>{{$attribute->name }}: </dt>
    <dd>
        <select class="form-control form-control-sm option" style="width:180px;" name="{{ strtolower($attribute->name) }}">
            <option data-price="0" value="0"> select {{ $attribute->name }}</option>
            @foreach($attributeValues as $attributeValue)
                @if ($attributeValue->attribute_id == $attribute->id)
                    <option
                        data-price="{{ $attributeValue->price }}"
                        value="{{ $attributeValue->value }}"> {{ ucwords($attributeValue->value . ' +'. $attributeValue->price) }}
                    </option>
                @endif
            @endforeach
        </select>
    </dd>

@endforeach

---

您可以使用

.each

循环遍历您的

.options

选择框，然后使用

$（this.data（“price”）

获取价格值并将总计添加到

产品价格

span中。此外，我还添加了

数据原始价格=“{{$product->price}”

仅在计算时保留原始值，否则将覆盖原始值

演示代码：

$（'.option'）.change（函数（）{
var original_price=parseFloat（$（'productPrice'）。数据（'original-price'）；
var值=0
var价格为0
//循环浏览所有选定的选项。。
$（'.option:selected'）。每个（函数（）{
price\u of_attr+=parseInt（$（this）.data（“price”）//获取数据价格
//仍然混淆..您还需要值吗？如果是，请使用
//值+=$（this）.val（）
})
var finalPrice=原始价格+属性价格//您可以在此处总计添加+值
$（'finalPrice'）.val（finalPrice）；
$（'#productPrice'）.html（最终价格）；
});

Abc:
选择Abc
Abc-1
Abc-2
Abc2：
选择Abc2
Abc2-12
Abc2-22
$
123
 <script>
        $(document).ready(function () {
            $('#addToCart').submit(function (e) {
                if ($('.option').val() == 0) {
                    e.preventDefault();
                    alert('Please select an option');
                }
            });
            $('.option').change(function () {
                $('#productPrice').html("{{ $product->sale_price != '' ? $product->sale_price : $product->price }}");
                let extraPrice = $(this).find(':selected').data('price');
                let price = parseFloat($('#productPrice').html());
                let finalPrice = (Number(extraPrice) + price).toFixed(2);
                $('#finalPrice').val(finalPrice);
                $('#productPrice').html(finalPrice);
            });
        });
    </script>


original_price = 25$;
red_color = 5$;
screen_size = 7$;
total_price = original_price + red_color + screen_size;