Question

我根据您在所需过滤器类型上选择的下拉选项编写了我的js代码来更改按钮上的URL，但现在我还需要根据您添加到购物车的数量来更改该URL 。我有一个功能或另一个功能，但不能同时工作。

绝对欢迎任何建议/帮助！我是javascript的新手。

<script type="text/javascript">
        function update_price() {
            if ( document.getElementById("filter_menu").value == "1" ){
                //this is the first element in the drop down menu. do nothing
                document.getElementById("price").innerHTML = "0.00";
                document.getElementById("total-price").innerHTML = calculateTotalPrice(0.0, 0.0);
            }

            if ( document.getElementById("filter_menu").value == "2" ){
                // HEPAPure functionality in here.
                // don't need to create a new function if you don't want to
                document.getElementById("price").innerHTML = "0.00";
                document.getElementById("total-price").innerHTML = calculateTotalPrice(599.0, 0.0);
                document.getElementById('myLink').href="http://www.mysite.com/cart.asp?product=unit-name&cartitem=unit-name&cartadd=1";
            }

            if ( document.getElementById("filter_menu").value == "3" ){
                // HEPASilver
                document.getElementById("price").innerHTML = "10.00";
                document.getElementById("total-price").innerHTML = calculateTotalPrice(599.0, 10.0);
                document.getElementById('myLink').href="http://www.mysite.com/cart.asp?product=unit-name-silver&cartitem=unit-name-silver&cartadd=1";
            }

            if ( document.getElementById("filter_menu").value == "4" ){
                // HEPAFreshPlus
                document.getElementById("price").innerHTML = "20.00";
                document.getElementById("total-price").innerHTML = calculateTotalPrice(599.0, 20.0);
                document.getElementById('myLink').href="http://www.mysite.com/cart.asp?product=unit-name-freshplus&cartitem=unit-name-freshplus&cartadd=1";

            }

            if ( document.getElementById("filter_menu").value == "5" ){
                // HEPAOdorCell
                document.getElementById("price").innerHTML = "30.00";
                document.getElementById("total-price").innerHTML = calculateTotalPrice(599.0, 30.0);
                document.getElementById('myLink').href="http://www.mysite.com/cart.asp?product=unit-name-odorcell&cartitem=unit-name-odorcell&cartadd=1";

            }
        }

        function calculateTotalPrice(unitPrice, price){
            var total = unitPrice + price;
            return total;
        }

        function update_URL(){
            if ( document.getElementById("quantity_top").value == "cartadd2" ){
                // HEPAOdorCell
                document.getElementById('myLink').href="http://www.mysite.com/cart.asp?product=unit-name-odorcell&cartitem=unit-name-odorcell&cartadd=2";

            }
        }   

    </script>

Answer 1

这是一个我觉得你想要包装在你的HTML中的对象。

一些事情：

有像jscart这样的javascript / jquery插件可以提供大量的功能开箱即用。
使用onchange和onclick 不推荐使用html元素属性---使用jquery注册事件或addEventListener。
有很多东西都可以更好，但希望这段代码能给你一个对象的介绍。也许一些更有经验的程序员会权衡。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>filter cart</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">

</script>

      </head>




<body>
<div class="right">
<div class="add-product-cart">
<div class="currentprice" style="height:100%">
  <div class="l"><strong>Unit Price:</strong></div>
  <div class="r">$<span id="unit_price_int">599.00</span></div>
  <div class="l"><strong>Filter Upgrade:</strong></div>
  <div class="r">$<span id="filter_upgrade_price_int">0.00</span></div>
  <div class="l"><strong>Total Price:</strong></div>
  <div class="r">$<span id="total_price_int">0.00</span></div>
</div>
<div class="currentprice" style="height:100%">
  <p>Customize Your airpurifier</p>
  <p>Filter Options:</p>
  <select id="filter_menu" onchange="very_simple_cart.update_cart()">
    <option value="1">Make Your Selection</option>
    <option value="2">HEPA-Pure Filter</option>
    <option value="3">HEPA-Silver Filter</option>
    <option value="4">HEPA-FreshPlus Filter</option>
    <option value="5">HEPA-OdorCell Filter</option>
  </select>
</div>
<form method="post" name="addaddtocart" action="cart.asp">
  <input name="product" value="airpurifier" type="hidden">
  <input name="cartitem" value="airpurifier" type="hidden">
  <div id="og-div_top"></div>
  <div class="quantity" style="height:100%"> <span><strong>Qty:
  </strong>&nbsp;&nbsp;&nbsp;</span>
   <select name="cartadd" id="quantity_top" onchange="very_simple_cart.update_cart()" 
    style="margin-left: 10px;">
      <option selected="">1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
    <div class="add-quantity"> <a target="_blank" id="myLink"  
      onclick="very_simple_cart.update_cart()" href="http://www.mysite.com
      /cart.asp?product=unit-name&cartitem=unit-name&cartadd=2"><img
      src="http://www.alencorp.com/images/add-to-cart.png" border="0"></a> </div>
    </div>
</form>


  </div>
  </div>
  <script>





var very_simple_cart = { 

         "url_base" : "http://www.mysite.com/cart.asp?product=unit-name-", 

       "url_middle" : "&cartitem=unit-name-",

       "unit_price" : 599.00,

       "filter_upgrade" : 0,

       "total_price" : 599.00,



        "pure" : { 
                     "select_option_name" : "HEPA-Pure Filter",
                     "value" : "2", 
                     "price" : "0", 
                     "unit_price" : "0", 
                     "unit_name" : "pure"
                      },


       "silver" : { 
                     "select_option_name" : "HEPA-Silver Filter",
                     "value" : "3", 
                     "price" : "10", 
                     "unit_price" : "0", 
                     "unit_name" : "silver"
                     },  

       "freshplus" : { 
                      "select_option_name" : "HEPA-FreshPlus Filter",
                     "value" : "4", 
                     "price" : "20", 
                     "unit_price" : "0", 
                     "unit_name" : "freshplus"
                      },      



       "odercell" : { 
                     "select_option_name" : "HEPA-OderCell Filter",
                     "value" : "5", 
                     "price" : "30", 
                     "unit_price" : "0", 
                     "unit_name" : "odercell"
                      },


        "get_selected_filter_value" : function(filter){


                                       if ( this[filter] ) {
                                          return this[filter];
                                        } else {
                                        return 1;
                                      }
                                   },

         "get_selected_filter" : function(){

                                       var e = document.getElementById("filter_menu");
                                        var val = e.options[e.selectedIndex].value;
                                        console.log("selected filter value: " + val);

                                     for (var key in this ) {

                                        if ( val > 1 && this[key].value == val){

                                                      var name = this[key].unit_name;

                                                      return this[key];
                                                  }  else if( val == 1){

                                                       return 0; 

                                                }

                                             }
                                         },

                "get_quantity" : function(){

                                    var e = document.getElementById("quantity_top");
                                    var val = e.options[e.selectedIndex].value;

                                                 console.log("quantity: " + val );
                                                 return val;
                               },



                 "update_cart" : function(){

                                     var quantity = this.get_quantity();
                                     var selected_filter = this.get_selected_filter(); 
                     var selected_filter_value =                         

                 very_simple_cart.get_selected_filter_value(selected_filter.unit_name);

                if( selected_filter_value != 1 ){

                      var new_link = "http://www.mysite.com/" + 
                      "cart.asp?product=unit-name-" + 
                        selected_filter.unit_name + 
                      "&cartitem=unit-name-" + 
                      selected_filter.unit_name + 
                      "&cartadd=" + quantity;


                      this[selected_filter.unit_name].filter_upgrade = 

                      selected_filter.price;

                     this[selected_filter.unit_name].total_price =  

                     this[selected_filter.unit_name].unit_price 
                      + selected_filter.price;

                     var total_filter_upgrade = Number(selected_filter.price) * 

                       quantity;


                      document.getElementById('filter_upgrade_price_int').innerHTML=   
                      total_filter_upgrade;

                      document.getElementById('myLink').href= new_link;
                      document.getElementById("unit_price_int").innerHTML = 
                      Number(this.unit_price);
                      document.getElementById("total_price_int").innerHTML = 
                      Number(this.unit_price) + total_filter_upgrade;     
                    }
                  } 
               };











      </script>




   </body>
   </html>


  </code>

Answer 2

这是我与JS一起使用的HTML：

<html>
    <body>
<div class="right">
  <div class="add-product-cart">
    <div class="currentprice" style="height:100%">
      <div class="l"><strong>Unit Price:</strong></div>
      <div class="r">$599.00</div>
      <div class="l"><strong>Filter Upgrade:</strong></div>
      <div class="r">$<span id="price">0.00</span></div>
      <div class="l"><strong>Total Price:</strong></div>
      <div class="r">$<span id="total-price">0</span>.00</div>
    </div>
    <div class="currentprice" style="height:100%">
      <p>Customize Your airpurifier</p>
      <p>Filter Options:</p>
      <select id="filter_menu" onchange="update_price()">
        <option value="1">Make Your Selection</option>
        <option value="2">HEPA-Pure Filter</option>
        <option value="3">HEPA-Silver Filter</option>
        <option value="4">HEPA-FreshPlus Filter</option>
        <option value="5">HEPA-OdorCell Filter</option>
      </select>
    </div>
    <form method="post" name="addaddtocart" action="cart.asp">
      <input name="product" value="airpurifier" type="hidden">
      <input name="cartitem" value="airpurifier" type="hidden">
      <div id="og-div_top"></div>
      <div class="quantity" style="height:100%"> <span><strong>Qty:</strong>&nbsp;&nbsp;&nbsp;</span>
        <select name="cartadd" id="quantity_top" style="margin-left: 10px;">
          <option selected="">1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
          <option>9</option>
          <option>10</option>
        </select>
        <div class="add-quantity"> <a id="myLink" onclick="update_price()" href="http://www.mysite.com/cart.asp?product=unit-name&cartitem=unit-name&cartadd=2"><img src="http://www.alencorp.com/images/add-to-cart.png" border="0"></a> </div>
      </div>
    </form>


  </div>
</div>

使用多个下拉菜单和函数来更改按钮上的URL

2 个答案: