用于 php 循环的 jquery 全局变量

Question

每个循环都有一个 php，它为我的数据库中的每个产品输出一个表单。

我需要帮助的是这段 jquery

    <script type="text/javascript">
        // When the document is ready

        $(function() {


            $('#foo').change(function() {

              var form = $(this).parents('form');

                // Size is whatever the value the user has selected
                var size = $(this).val();

                var price,
                    itemId;

                // Determine the correct price and item ID based on the selected size
                switch (size) {
                <?php 
                    $var = 1;
                    foreach($subitem['sizes'] as $size) {
                        echo "\n";
                        echo "\t\t\t\t\t\tcase '".$size."':\n";
                        echo "\t\t\t\t\t\t\tprice = '".$subitem['price']."';\n";
                        echo "\t\t\t\t\t\t\titemId = '".$subitem['prodid']."-".$var."';\n";
                        echo "\t\t\t\t\t\t\tbreak;\n\n";

                    $var++;
                    }
                    echo "\t\t\t\t\t}";
                ?>

                form.find('.price').text(price);

                form.find('[name=my-item-price]').val(price);

              // Update the item ID
              form.find('[name=my-item-id]').val(itemId);


            });
        });
    </script>

这与表单同时输出，本质上是表单的一部分。它的作用是当用户从选择列表中选择一个选项时，它会更改包含价格的隐藏表单元素。

我需要做的不是硬编码价格，而是从数据库中获取价格。

因为它循环通过 4 条记录来填充选择列表，所以不可能只在 switch 语句中回显价格。我想做的是让一些全局变量填充数据库中的价格，然后在 switch 语句中使用该全局变量

我想我可以在这里初始化全局变量

//Create field for item name based upon record count    
if(count($subitem['sizes']) > 1)
{

我的 php 和 jquery 代码

foreach($items AS $subitem)
{
    list($prodid, $item ,$size, $description, $price) = $subitem;

    //Create field for item name based upon record count    
    if(count($subitem['sizes']) > 1)
    {
        $item_name_field = "<ul><li><select name=\"my-item-name\" id=\"foo\">\n";
        foreach($subitem['sizes'] as $size)
        {
            $item_name_field .= "<option value=\"{$size}\">{$size}</option>\n";
        }
        $item_name_field .= "</select></li></ul>\n";
    }
    else
    {
        $item_name_field = "<input type=\"hidden\" name=\"my-item-name\" value=\"{$subitem['item']}\" />";
    }

    //Creat the form
    if ($count % NUMCOLS == 0) { echo "<tr>"; } //new row
    echo "<td>\n"; 
    echo "<form method=\"post\" action=\"\" class=\"jcart\">\n";
    echo "    <fieldset>\n";
    echo "        <input type=\"hidden\" name=\"jcartToken\" value=\"{$_SESSION['jcartToken']}\" />\n";
    echo "        <input type=\"hidden\" name=\"my-item-id\" value=\"{$subitem['prodid']}\" />\n";
    echo "        <input type=\"hidden\" name=\"my-item-price\" value=\"{$subitem['price']}\" />\n";
    echo "        <input type=\"hidden\" name=\"my-item-url\" value=\"http://yahoo.com\" />\n";
    echo "        {$item_name_field}\n";
    echo "        <ul>\n";
    echo "          <li>Price: $<span class=\"price\">{$subitem['price']}</span></li>\n";
    echo "          <li><label>Qty: <input type=\"text\" name=\"my-item-qty\" value=\"1\" size=\"3\" /></label></li>\n";
    echo "        </ul>\n";
    echo "        <input type=\"submit\" name=\"my-add-button\" value=\"add to cart\" class=\"button\" />\n";
    echo "    </fieldset>\n";
    echo "</form>\n";
    echo "</td>\n";
    ?>

    <script type="text/javascript">
        // When the document is ready
        $(function() {


            $('#foo').change(function() {

              var form = $(this).parents('form');

                // Size is whatever the value the user has selected
                var size = $(this).val();

                var price,
                    itemId;

                // Determine the correct price and item ID based on the selected size
                switch (size) {
                case 'Small':
                    price = '10.00';
                    itemId = '1-a';
                    break;
                case 'Medium':
                    price = '20.00';
                    itemId = '1-b';
                    break;
                case 'Large':
                    price = '30.00';
                    itemId = '1-c';
                    break;
                case 'X-Large':
                    price = '30.00';
                    itemId = '1-c';
                    break;
                }

                form.find('.price').text(price);

                form.find('[name=my-item-price]').val(price);

              // Update the item ID
              form.find('[name=my-item-id]').val(itemId);


            });
        });
    </script>
    <?php 
    $count++;
    if ($count % NUMCOLS == 0) { echo "</tr>\n"; } # end row
    //$counter++;  //Doesn't appear this is used
}

编辑：

我已经设法让它工作了，有点，但价格都是一样的。

我需要做的是将每个尺寸的价格分配给尺寸。

<script type="text/javascript">
        // When the document is ready

        $(function() {


            $('#foo').change(function() {

              var form = $(this).parents('form');

                // Size is whatever the value the user has selected
                var size = $(this).val();

                var price,
                    itemId;

                // Determine the correct price and item ID based on the selected size
                switch (size) {
                <?php 
                    $var = 1;
                    foreach($subitem['sizes'] as $size) {
                        echo "\n";
                        echo "\t\t\t\t\t\tcase '".$size."':\n";
                        echo "\t\t\t\t\t\t\tprice = '".$subitem['price']."';\n";
                        echo "\t\t\t\t\t\t\titemId = '".$subitem['prodid']."-".$var."';\n";
                        echo "\t\t\t\t\t\t\tbreak;\n\n";

                    $var++;
                    }
                    echo "\t\t\t\t\t}";
                ?>

                form.find('.price').text(price);

                form.find('[name=my-item-price]').val(price);

              // Update the item ID
              form.find('[name=my-item-id]').val(itemId);


            });
        });
    </script>

Answer 1

您可以将 json 对象与标记一起呈现在 php 代码中，并在 js 中使用，如下所示

    var item_prices_by_size = { "Small": { "Price": "10.00", "ItemId": "1-a" }, 
                                 "Medium": { "Price": "30.00", "ItemId": "1-b" } 
                              };

            $(function() {


                $('#foo').change(function() {

                  var form = $(this).parents('form');

                    // Size is whatever the value the user has selected
                    var size = $(this).val();

// Determine the correct price and item ID based on the selected size
                    var price = item_prices_by_size[size].Price,
                        itemId = item_prices_by_size[size].ItemId;

                    form.find('.price').text(price);

                    form.find('[name=my-item-price]').val(price);

                  // Update the item ID
                  form.find('[name=my-item-id]').val(itemId);


                });
            });