我正在创建一个商店，其中列出了带有选项的产品（即通过下拉菜单选择不同的尺寸，通过选择单选按钮选择不同的面料）。（查看 www.searing.me/newstore）
我编写了以下代码，以便如果做出选择，价格将被更新而无需 POST 这样做，从而刷新到屏幕顶部。我的问题是 - 当我“添加到购物车”时，所有价格都会更新为最初选择的价格。
因此，实质上，在第一个产品上，如果您选择“棕色和弦”选项以添加 2.25 美元 - 价格会通过将 2.25 美元添加到 30.00 美元而发生变化 - 因此为 32.25 美元。但是，当您单击添加到购物车时 - 右侧的产品也将其价格更改为 2.25 美元。
我认为这与 POST 为每个注册另一个 onchange 事件有关......我不知道。而且我是 Jquery/Javascript 的初学者，我非常了解正在发生的事情。
脚本是：
function updatePrice(e) {
var product = $(e.target).closest('.product');
var price = parseFloat(product.data('price'));
var sizePrice = parseFloat(product.find('[name=sizeSelect] :selected').data('price'));
if (isNaN(sizePrice)) {
sizePrice = 0;
}
var patternPrice = parseFloat(product.find('[name=fabric]:checked').data('price'));
if (isNaN(patternPrice)) {
patternPrice = 0;
}
var totalPrice = price + sizePrice + patternPrice;
product.find('.totalCost').text('$' + totalPrice.toFixed(2));
}
$(document).ready(function(){
$(document).on('change', '.product', updatePrice);
}
我需要做什么才能防止所有其他产品在添加到购物车时更新其价格？
编辑：首先，重要的是要注意脚本运行完美，直到单击提交按钮。单击按钮后，即会更新所有价格。
这是页面脚本：
<?php
echo "<div><img style='padding-left:35px; float:left;' src='/images/just11stitchesbannerII.png'></div>";
echo "<div style='float:right; padding-right:55px;'>";
echo return_categories($dbConnection);
echo "</div>";
if ($cart->countItems() > 0) {
echo '<div style="float:right; clear:left; padding-right:50px;">
<a style="outline:0;" class="gallery2" href="shoppingcartdev.php"><img style="width:55px; padding-left:75px;" src="/images/scart.png"></img></a><br/>
<span style="font-size:.75em;">You have ' . $cart->countItems() . ' item(s) in your shopping cart.</span>
</div>';
}
else {
echo '<div style="float:right; clear:left; padding-right:50px;">
<img style="width:55px; padding-left:75px;" src="/images/scart.png"></img><br/>
<span style="font-size:.75em;">You have ' . $cart->countItems() . ' in your shopping cart.</span>
</div>';
}
echo '<h1 style="clear:left; padding-top:5px;">Products</h1>';
// Find out if page is displaying all the products or if it is being filtered
$testProducts = new Products();
if (isset($_POST['category_submit']) && isset($_POST['categories'])) {
$_POST['test'] = 'FALSE';
$linkArray = printFilteredProductLinks("/newstore", $dbConnection->db, $_POST['categories']);
$myarray = $testProducts->getSelectedOrderProducts($linkArray["order_by"], $linkArray["start"], $linkArray["display"], 1, $_POST['categories']);
}
else {
$_POST['test'] = 'FALSE';
$linkArray = printProductLinks("/newstore", $dbConnection->db, 1);
$myarray = $testProducts->getOrderProducts($linkArray["order_by"], $linkArray["start"], $linkArray["display"], 1);
}
$counter = 0;
$i = 0;
$flag = 0; // used to check if at end of table and only 1 cell for that row
$stepthroughitemcount =0;
$itemcount = count($myarray);
if ($itemcount % 2 == 1) {
$counter = floor( $itemcount / 2 ); // If Flag = 1 then there will be one more cell to make in the final row.
$flag = 1;
}
else {
$counter = $itemcount / 2;
}
// START TABLE
echo "<table style='margin:5px; border-spacing:5px;'>";
while ($i < $counter) {
$tdcount = 0;
while ($tdcount < 2) {
$optionCount = 0;
$mySizes = new Sizes($myarray[$stepthroughitemcount]->getID());
$myPatterns = new Patterns($myarray[$stepthroughitemcount]->getID());
echo "<td valign='top' class='product' data-price='" . returnTotalPrice($myarray[$stepthroughitemcount]->getPrice()) . "' style='width:575px; padding-top:8px; border: 2px solid green; padding:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #ACBF9A;'>
<div style='width:175px; float:left; text-align:center;'>
<a style='display:inline; float:none;' class='gallery' href='/prod_pics/" . $myarray[$stepthroughitemcount]->getPictureName() . "'><img id='picture' src='/red_prod_pics/" . $myarray[$stepthroughitemcount]->getPictureName() . "'</img></a>
<p class='totalCost' style='text-align:center; margin-top:0px;'>$" . number_format(returnTotalPrice($myarray[$stepthroughitemcount]->getPrice()), 2) . "</p>
<form id='productForm' enctype='multipart/form-data' action='newstore.php' method='POST'>
<input type='hidden' name='product_id' value='{$myarray[$stepthroughitemcount]->getID()}' />
<input type='hidden' name='product_price' value='{$myarray[$stepthroughitemcount]->getPrice()}' />
<p style='font-size:.7em; border:1px solid #008000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ddf0dd; padding:2px;'>" . $myarray[$stepthroughitemcount]->getDescription() . "</p>
<input style='display:inline; margin-top:5px; float:none;' type='submit' name='AddCart' value='Add To Cart'/>
</div>
<div style='margin-left:10px; float:left; width:373px;'>
<span style='font-weight:bold;'>Sizes:</span>
<span style='padding-left:100px;'>
<select name='sizeSelect' style='width:200px; text-align:right;'>";
if (isset($_POST['AddCart'])){
foreach ($mySizes->getAllSizes() as $value) {
//echo "<option>valuesid = " . $value->getSID() . " postsizeselect = " . $_POST['sizeSelect'] . "</option>";
echo "<option " . ( $value->getPSID() == $_POST['sizeSelect'] ? 'selected' : '') . " data-price='" . $value->getSPRICE() . "' value=" . $value->getPSID() . ">" . $value->getSNAME() . "  $" . number_format($value->getSPRICE(), 2) . "</option>";
}
}
else {
foreach ($mySizes->getAllSizes() as $value) {
//echo $value->getSID() . ' ' . $myarray[$stepthroughitemcount]->getDefaultSize();
echo "<option " . ( $value->getSID() == $myarray[$stepthroughitemcount]->getDefaultSize() ? 'selected' : '') . " data-price='" . $value->getSPRICE() . "' value=" . $value->getPSID() . ">" . $value->getSNAME() . "  $" . number_format($value->getSPRICE(), 2) . "</option>";
}
}
echo "</select>
</span>
<br/>
<span style='font-weight:bold;'>Fabrics & Colors:</span><br/>
<table>
<tr>";
$rowcount = 0;
foreach ($myPatterns->getAllPatterns() as $value2) {
if ($rowcount % 4 == 0) {
echo '</tr>
<tr>';
}
echo '<td style="float:left; width:85px; text-align:center; ">
<img src="/patterns/' . $value2->getPATPICTURENAME() . '" /><br/>
<span style="font-size:.65em; width:65px; color: #132301;">' . $value2->getPATNAME() . '</span><br/>
<span>$' . number_format($value2->getPATPRICE(), 2) . '</span><br/>
<input data-price="' . $value2->getPATPRICE() . '" type="radio" ' . ( $value2->getPATID() == $myarray[$stepthroughitemcount]->getDefaultFabric() ? "checked=\'checked\'" : "") . ' name="fabric" value=' . $value2->getPPID() . ' />
</td>';
$rowcount +=1;
}
echo '</tr>
</table>
</div></form>
</td>';
$stepthroughitemcount +=1;
$tdcount +=1;
}
echo "</tr>";
$i+=1;
}
if ($flag == 1 ) {
$mySizes = new Sizes($myarray[$stepthroughitemcount]->getID());
$myPatterns = new Patterns($myarray[$stepthroughitemcount]->getID());
echo "<tr>
<td valign='top' class='product' data-price='" . returnTotalPrice($myarray[$stepthroughitemcount]->getPrice()) . "' style='width:575px; padding-top:8px; border: 2px solid green; padding:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #ACBF9A;'>
<div style='width:175px; float:left; text-align:center;'>
<a style='display:inline; float:none;' class='gallery' href='/prod_pics/" . $myarray[$stepthroughitemcount]->getPictureName() . "'><img id='picture' src='/red_prod_pics/" . $myarray[$stepthroughitemcount]->getPictureName() . "'</img></a>
<p class='totalCost' style='text-align:center; margin-top:0px;'>$" . number_format(returnTotalPrice($myarray[$stepthroughitemcount]->getPrice()), 2) . "</p>
<form id='productForm' enctype='multipart/form-data' action='newstore.php' method='POST'>
<input style='display:inline; float:none;' type='submit' name='AddCart' value='Add To Cart'/>
<input type='hidden' name='product_id' value='{$myarray[$stepthroughitemcount]->getID()}' />
<input type='hidden' name='product_price' value='{$myarray[$stepthroughitemcount]->getPrice()}' />
</div>
<div style='margin-left:10px; float:left; width:373px;'>
<span style='font-weight:bold;'>Sizes:</span>
<span style='padding-left:100px;'>
<select name='sizeSelect' style='width:200px; text-align:right;'>";
foreach ($mySizes->getAllSizes() as $value) {
//echo $value->getSID() . ' ' . $myarray[$stepthroughitemcount]->getDefaultSize();
echo "<option " . ( $value->getSID() == $myarray[$stepthroughitemcount]->getDefaultSize() ? 'selected' : '') . " data-price='" . $value->getSPRICE() . "' value=" . $value->getPSID() . ">" . $value->getSNAME() . "  $" . number_format($value->getSPRICE(), 2) . "</option>";
}
echo "</select>
</span>
<br/>
<span style='font-weight:bold;'>Fabrics & Colors:</span><br/>
<table>
<tr>";
$rowcount = 0;
foreach ($myPatterns->getAllPatterns() as $value2) {
if ($rowcount % 4 == 0) {
echo '</tr>
<tr>';
}
echo '<td style="float:left; width:85px; text-align:center; ">
<img src="/patterns/' . $value2->getPATPICTURENAME() . '" /><br/>
<span style="font-size:.75em">' . $value2->getPATNAME() . '</span><br/>
<span>$' . number_format($value2->getPATPRICE(), 2) . '</span><br/>
<input data-price="' . $value2->getPATPRICE() . '" type="radio" ' . ( $value2->getPATID() == $myarray[$stepthroughitemcount]->getDefaultFabric() ? "checked=\'checked\'" : "") . ' name="fabric" value=' . $value2->getPPID() . ' />
</td>';
$rowcount +=1;
}
echo '</tr>
</table>
</div></form>
</td>
</tr>';
}
echo "</table>";
if (isset($_POST['category_submit']) && isset($_POST['categories'])) {
printFilteredProductLinks("/newstore", $dbConnection->db, $_POST['categories']);
}
else {
printProductLinks("/newstore", $dbConnection->db, 1);
}
echo '</body>
</html>';
?>