Question

我正在尝试制作购物车页面，根据每个选项，您可以在此页面上看到价格更新 http://store.apple.com/us_smb_78313/configure/MC915LL/A?mco=MTk4Mjc2MDA

如果你在苹果页面上注意到每个无线电字段值都有一个像095-344这样的数字，这个值是一些如何通过ajax发送到服务器端然后接收一个价格值作为总数添加到购物车被观看了。

我在这里创建了类似的东西就是链接。 http://69.231.228.101:8888/demo/

我只使用了前两个字段，即数量和类型。当页面加载时，第三个选项被自动选中并显示其价格。当选择了部分选择时，项目值将累积到右上角已存在的值。我遇到的问题是，如果你现在再次选择数量来改变你希望值重置的数量，而不是做正确的数学。我做错了什么？

另外，你知道一个jquery网站或某个尝试过这个我可以学习的网站吗？我看起来很长很难，却找不到任何这种创造的东西。我只看到一堆简单的购物车计算页面，没有什么像我正在寻找的东西。很多网站都有这样的东西，我正在寻找例如apple，dell，hp，用于产品定制和基于您的选择的价格更新。我想知道他们如何以及在何处学习如何去做。必须有一个教它的网站。

感谢

Answer 1

好吧。试试这个：拿表格并提交。（如果你没有这样做，那就去做吧）用ajax（看看this）。这样，每个检查过的无线电都会被提交。现在拿每个无线电并检查他的值，将变量$priceNUM添加到合适的价格值。最后，将每个单个已检查无线电的每个价格加到$total var并输出。这是一个愚蠢的例子。

HTML

<form>
 <input type="radio" name="box1" value="01"/>
 <input type="radio" name="box1" value="03"/>
 <input type="radio" name="box1" value="03"/>

 <input type="radio" name="box2" value="01"/>
 <input type="radio" name="box2" value="03"/>
 <input type="radio" name="box2" value="03"/>

 <input type="radio" name="box3" value="01"/>
 <input type="radio" name="box3" value="03"/>
 <input type="radio" name="box3" value="03"/>
</form>

PHP

<?php

# Requiring vars
$box1 = $_POST['box1'];
$box2 = $_POST['box2'];
$box3 = $_POST['box3'];

# Checking
if (empty($box1) or empty($box2) or empty($box3)) { /* Error, or $price = 0 */ }

switch ($box1) 
{
 case '01':
  $price1 = 10;
 break;

 case '02':
  $price1 = 20;
 break;

 case '03':
  $price1 = 30;
 break;

 default:
  $price1 = 0;
 break;
}

switch ($box2) 
{
 case '01':
  $price2 = 50;
 break;

 case '02':
  $price2 = 100;
 break;

 case '03':
  $price2 = 150;
 break;

 default:
  $price2 = 0;
 break;
}

switch ($box3) 
{
 case '01':
  $price3 = 2;
 break;

 case '02':
  $price3 = 4;
 break;

 case '03':
  $price3 = 6;
 break;

 default:
  $price3 = 0;
 break;
}

$total = $price1 + $price2 + $price3;
echo $total;

＆GT;

现在使用jquery使表单在更改框时提交（我认为您已经知道如何执行此操作）并且我们已完成。

实际上每次发生时，我们都要计算总数，但这是最简单的方法。你也可以用数据库或cookie制作东西，但它变得太复杂了。

Answer 2

我想我想通了。我不敢相信我之前没有看到这个。我所要做的就是将每个选择的选定值分配给它自己的变量。然后在最后有一个函数，它从每个选择中获取每个值，然后显示它。

var qprice;
var typeprice;


$(document).ready(function() {


        /* -----------------------------------------------------
                Quantity Selection
           ----------------------------------------------------- */

        $("#quantity").change(function() 
        {
            var hash = $("#quantity").val(); //returns 0001 (ex)



            $.get("ajax.php", { id: hash },

            function(data)
            {
                qprice = data.price;
                displayPrice();
            }, "json");
        });




        /* -----------------------------------------------------
                Type Selection
           ----------------------------------------------------- */
        $("#type").change(function() 
        {
            var hash = $("#type").val(); //returns 0001 (ex)


            $.get("ajax.php", { id: hash },

            function(data)
            {   
                typeprice = data.price
                displayPrice();
                //$("#price").attr({value: total});

            }, "json");
        });








        function displayPrice() 
        {
            total = parseInt(qprice) + parseInt(typeprice);
            alert(total);
        }


});

我只需输入所有其他检查，以便我不会得到未定义的错误。查理，我爱你，你激励我弄明白。

尝试创建类似购物车页面的苹果（基于自定义选择的价格更新）

2 个答案: