JQUERY根據選擇選項更改div內容-我迷路了

Question

在以下代碼中，我有兩個下拉列表，即unit-type和unit-size。 我有兩個，單位價格和總行數，需要更新，首先在頁面加載時，然后每當其中一個或兩個下拉列表發生更改時，就需要更新。

問題是我是Java和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>&copy; 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>

Answer 1

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>

JQUERY根據選擇選項更改div內容-我迷路了

問題描述

1 個解決方案

解決方案1
0 2017-04-22 20:11:46

JQUERY根據選擇選項更改div內容-我迷路了

問題描述

1 個解決方案

解決方案1 0 2017-04-22 20:11:46

解決方案1
0 2017-04-22 20:11:46