jQuery中的change事件

Question

jQuery中的change事件

javascriptjqueryhtml

3

我需要计算总价（基础价格+标志价格+材料价格）。

我尝试了这段代码 mycode。

条件： 1）如果选择了标志类型和材料类型，我需要得到总价。 2）如果我已经选择了两个值，现在我更改标志价格，我需要得到正确的总价。 3）每选择一个选项都要动态显示总价。 4）不需要使用提交按钮。

HTML

<p class="logotype left customLabel"><span>base price :</span>1000</p>
<p class="logotype left customLabel"><span>Logo Type :</span></p>
   <form class="left margin0" name="logotypeform" method="post">
        <select name="logoprice" id="logotypeprice">
        <option value="">--</option>           
            <option value="50">Default logo</option>
            <option value="100">Imported logo</option>
            <option value="25">Text</option>
             <option value="0">None</option>
        </select>
    </form>
<input class="logoTypeVal" type="" value="">

  <p class="Material left customLabel"><span>Material    :</span></p>
   <form class="left margin0" name="priceform" method="post">
        <select name="price" id="materialprice">
        <option value="">--</option>
            <option value="10">Nylon</option>
            <option value="20">Sticker</option>
            <option value="30">Printed</option>
            <option value="30">Embroiding</option>
             <option value="0">None</option>
        </select>
    </form>
<input class="materialVal" type="" value="">
<p class="Material left customLabel"><span>Total Value    :</span></p><input class="totalVal" type="" value="total value">

JS

jQuery(document).ready(function(){
     var baseValue = 1000;

     jQuery('#logotypeprice').change(function(){
         var logotypeprice = jQuery(this).val();
         jQuery('input.logoTypeVal').val(logotypeprice);

     });
     jQuery('#materialprice').change(function(){
         var materialprice = jQuery(this).val();
         jQuery('input.materialVal').val(materialprice);
         var baseprice = "<?php echo $basePrice ?>";
         var logoval = logotypeprice;
         var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
         alert(totalprice);
         jQuery('input.totalVal').val(totalprice);
     });    

});

- vas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dhiraj · Accepted Answer

更新：

由于您需要根据更改每个选择来更新总值，因此应在两个处理程序上计算总值。如下所示：

var baseValue = 1000,
    logotypeprice = 0,
    materialprice = 0;
$(document).ready(function () {
    $('#logotypeprice').change(function () {
        logotypeprice = jQuery(this).val();
        $('input.logoTypeVal').val(logotypeprice);
        calculateTotal();
    });
    $('#materialprice').change(function () {
        materialprice = $(this).val();
        $('input.materialVal').val(materialprice);
        calculateTotal();
    });
});

function calculateTotal() {
    var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logotypeprice);
    $('input.totalVal').val(totalprice);
}

这里是更新后的演示

附注：每个元素都可以使用简短版本$，而不必为每个元素编写jQuery

您正在尝试访问不可在materialprice更改处理程序内部访问的logotypeprice变量。

要么像这样全局声明logotypeprice

 var baseValue = 1000;
 var logotypeprice;

 jQuery('#logotypeprice').change(function(){
     logotypeprice = jQuery(this).val();
     jQuery('input.logoTypeVal').val(logotypeprice);

 });
 jQuery('#materialprice').change(function(){
     var materialprice = jQuery(this).val();
     jQuery('input.materialVal').val(materialprice);
     var baseprice = "100";
     var logoval = logotypeprice;
     var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
     alert(totalprice);
     jQuery('input.totalVal').val(totalprice);
 });

或者

从input.logoTypeVal或#logotypeprice中获取标志价值，像这样

 jQuery('#materialprice').change(function(){
     var materialprice = jQuery(this).val();
     jQuery('input.materialVal').val(materialprice);
     var baseprice = "100";
     var logoval = jQuery('input.logoTypeVal').val(); // OR logoval = jQuery('#logotypeprice').val();
     var totalprice = parseInt(baseValue) + parseInt(materialprice) + parseInt(logoval);
     alert(totalprice);
     jQuery('input.totalVal').val(totalprice);
 });

这里是一个演示。