在下面的代码中，我有两个下拉列表，unit-type和unit-size。我有两个，单位价格和行总数，需要更新，首先在页面加载，然后每当一个或两个下拉列表更改。
问题是我是Javascript和Jquery的新手并且真的不知道我在做什么，而且我尝试过的所有例子似乎都不适合我。我希望有人能指出我的问题所在以及如何使其发挥作用？
<?php
session_start();
include '../include/search.php';
$dbserver = '#########';
$dbname = '########';
$dbuser = '########';
$dbpassword = '#########';
$category = $_GET['category'];
$db = mysqli_connect($dbserver, $dbuser, $dbpassword, $dbname);
if (mysqli_connect_errno()) {
die("Connection failed: " . mysqli_connect_error());
}
mysqli_select_db($db, $dbname);
$sql = "SELECT * FROM products WHERE category = '".$category."'";
$result = mysqli_query($db, $sql);
if (!$result) {
die ('Error: Could not select products'.mysqli_error($db));
}
function make_size_select($product) {
echo '<select name="unit_menu">';
$price_set = array(
'halfpint'=>$product['halfpint'],
'pint'=>$product['pint'],
'dk'=>$product['dk'],
'quart'=>$product['quart']);
$handles = array(
'halfpint'=>'Half Pint (8 oz)',
'pint'=>'Pint (16 oz)',
'dk'=>'Dutch Kettle (16 oz)',
'quart'=>'Quart (32 oz)');
$i = 0;
foreach ($price_set as $key=>$value) {
if ( $value > 0.00) {
$i++;
if ($i == 1) {
echo '<option value="'.$value.'" selected="selected">'.$handles[$key].'</option>';
} else {
echo '<option value="'.$value.'">'.$handles[$key].'</option>';
}
}
}
echo '</select>';
}
function category_select($product) {
$categories = array();
foreach ($product as $row) {
if (!in_array($row['category'], $categories)) {
array_push($row['category']);
}
}
echo '<select name="categories" onChange="loadNewCategory();">';
foreach ($categories as $category) {
echo '<option '.$category.'>'.ucfirst($category);
}
echo '</select>';
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Smoky Mountain Honey House</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<!----start-header----->
<div class="header_img">
<img src="../images/header_img.jpg" alt="" />
<div class="wrap">
<div class="header">
<div class="logo">
<a href="index.html"><img src="../images/logo.png" alt=""></a>
</div>
<div class="menu">
<nav class="clearfix">
<ul class="clearfix">
<li class="active"><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT</a></li>
<li><a href="../contact.html#map">LOCATIONS</a></li>
<li><a href="../store.html">SHOP</a></li>
<li><a href="../contact.html">CONTACT</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</div>
</div>
</div>
</div>
<!----End-header----->
<div class="wrap">
<div class="content">
<div class="category-header">
<h2><?php echo ucfirst($category); ?></h2>
<!-- <div class="product-search">
<p>
Search our inventory: <form name="search" action="../include/functions.php?method=search" method="post">
<input type="text" name="search_terms" />
<input type="submit" value="submit" />
</form>
</p>
</div> -->
</div>
<?php
while ( $product = mysqli_fetch_array( $result, MYSQLI_ASSOC ) ) {
// display product ?>
<div class="product_row">
<script>
var product = <?php echo json_encode($product); ?>
</script>
<form name="order_row_<?php echo $product['product_id']; ?>" action="#" method="post">
<div class="product_id">
<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>">
<?php echo ucfirst($product['name']); ?>
</div>
<div class="type">
<select name="unit_type">
<option value="ind" selected>By the Jar</option>
<option value="case">By the Case</option>
</select>
</div>
<div class="unit">
<?php echo make_size_select($product); ?>
</div>
<div class="unit-price">
</div>
<div class="qty">
<input type="number" name="qty" min="0" maxlength="5" max="11" label="How many?" />
</div>
<div class="row-price"></div>
<div class="add_cell">
<button class="add-to-cart" onclick="addToCart();">Add To Cart</button>
</div>
</form>
</div>
<?php }; ?>
</div>
</div>
<div class="copy-right">
<p>© 2016 Smoky Mountain Honey House</p>
</div>
</div>
<!---End-footer---->
<script>
$( ".unit_type" ).change(function () {
var unitPrice = $(this).val();
if ( $(this).closest.(".unit_type") == "ind") {
unitPrice = unitPrice / 12.00;
}
$( this ).closest.( ".unit-price" ).text( unitPrice );
})
.change();
</script>
</body>
</html>
答案 0 :(得分：0)
jQuery最接近的是找不到兄弟姐妹（或父母的兄弟姐妹）的东西。我会得到最接近的产品行，并从那里找到子元素。
每个最近的地方也有一个点。例如：
closest.(".unit-price");
实际应该是：
closest(".unit-price");
您尝试选择的元素（.unit-type）不包含您尝试查找的类，而是包含一个名称。 jQuery中的点（。）表示类，哈希符号（＃）表示id。
<select name="unit_type">
应该是：
<select name="unit_type" class="unit_type">
如果您希望能够这样选择：
$(".unit_type");
$(".unit-type").change(function() {
var productRow = $(this).closest(".product_row");
var price = 5; // get your price here
var unitPrice;
if ($(this).val() == "ind") { // $(this).val() contains the value of the selected option
unitPrice = price / 12.00;
} else {
unitPrice = price / 24.00;
}
productRow.find(".unit-price").text(unitPrice);
}).change();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_row">
<div class="type">
<select name="unit_type" class="unit-type">
<option value="ind" selected>By the Jar</option>
<option value="case">By the Case</option>
</select>
</div>
<div class="unit-price">
</div>
</div>