Javascript jquery onchange是否受post事件影响？
我正在创建一个商店，里面的产品都有选项（即通过下拉菜单列出不同的尺寸，通过单选按钮选择不同的面料）。（请访问www.searing.me/newstore） 我编写了以下代码，这样，如果进行了选择，价格将被更新，而无需发布帖子，从而刷新到屏幕顶部。我的问题是-当我“添加到购物车”时，所有价格都会更新为最初选择的价格 因此，本质上，在第一个产品上，如果您选择“brown chord”选项添加2.25美元-价格会随着添加2.25美元到30.00美元而变化-因此是32.25美元。但是，当您单击“添加到购物车”时，右侧的产品也将其价格更改了2.25美元 我想这与为每个人注册另一个onchange事件有关……我不知道。我是Jquery/Javascript的初学者，非常了解正在发生的事情 脚本是：Javascript jquery onchange是否受post事件影响？,javascript,jquery,post,onchange,Javascript,Jquery,Post,Onchange,我正在创建一个商店，里面的产品都有选项（即通过下拉菜单列出不同的尺寸，通过单选按钮选择不同的面料）。（请访问www.searing.me/newstore） 我编写了以下代码，这样，如果进行了选择，价格将被更新，而无需发布帖子，从而刷新到屏幕顶部。我的问题是-当我“添加到购物车”时，所有价格都会更新为最初选择的价格 因此，本质上，在第一个产品上，如果您选择“brown chord”选项添加2.25美元-价格会随着添加2.25美元到30.00美元而变化-因此是32.25美元。但是，当您单击“添加到
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>';
?>
您可能只需要使用
$.first();
我认为你是对的，事件又被触发了
我想这是因为你所有的提交按钮都有相同的ID，并且每个文章都会调用updatePrice函数
请尝试一下，删除提交按钮的id。我怀疑这与导致另一个onChange事件的帖子有关。。。可能与“后端”的某些内容有关
如果在onChange代码上设置断点，它只在您更改输入时触发（如您所期望的）。此外，当您在将页面添加到购物车后返回页面时，PHP将返回带有已更新值的HTML。另一个重要的注意事项-它不仅仅是更新右边的代码，而是更新商店中所有项目的成本。代码在我看来很好。您的产品的html结构是什么？submit/post以某种方式触发了onchange事件。我将按钮更改为type按钮，然后写下：$（'input[type=button]'）。单击（function（）{$（'form'）。submit（）；}）；当我点击按钮时，它再次更新了所有的定价。不知何故-我需要找到一种方法，在提交页面时禁用on change事件处理程序触发…好的-我认为TravJenkins是正确的-我相信我有一个会话变量保存我的期权价格，它正在使用它来更新所有价格-让我在这里玩一玩，稍后更新。.closest（）
应该只返回一个结果。请务必注意，在提交页面之前，代码工作正常。它只更新一个价格。是“提交”（添加到购物车）一次更新了所有内容。我删除了“提交”按钮的id，它仍然会更新所有产品的价格。我再次浏览了您的html代码，有更多具有相同id的元素（例如表单本身）。元素ID在整个文档中应该是唯一的。这就是上课的目的。即使它不能解决您的实际问题，它可能会，但我无法测试它，您应该始终使用ID作为唯一的选择器。我感谢您的评论。老实说，这是我第一次尝试PHP。第二，如果你把它算作网站的第二版。最初，我将其设置为每种产品都在一条单独的线路上，现在有选项。当我妻子开始不止一次地列出照片，以便她能列出几种尺寸时，我意识到我需要再次访问。老实说，我认为我在编写代码时（在进入事件连接之前）经常会混淆id和name属性。或者，如果我使用CSS，我只是没有遵循最佳实践-我同意。但老实说，我不认为id是问题所在：（海德-仅供参考，我想我进去并删除了ID。我不知道为什么我会有这些ID是诚实的-除了可能在某个时候尝试一些js。它仍然不起作用-但我可以尝试任何东西，非常感谢您的时间。谢谢。不知怎的，提交/发布触发了onchange事件。我将按钮改为键入butt然后写下：$（'input[type=button]'）。单击（function（）{$（'form'）。submit（）；}）；当我点击按钮时，它再次更新了所有的定价。不知何故，我需要找到一种方法，在提交页面时，禁用on change事件处理程序触发。你是对的-抱歉-它更新了所有内容-我只是想指出右边的一个示例-谢谢你的catchign。如果你它是一种没有任何额外选项的表单。这也让我觉得它不是onChange（因为那些事件永远不会被触发）。Trav-我相信你可能是对的-我将使用一些代码并报告。