在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 
} 

編輯：

我已經成功地得到它的工作之類的，但價格AR e都一樣。

我需要做的是將每個尺寸的價格分配給大小。

<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); 


       }); 
      });