Question

想要让这个例子中的选项运作良好，但我需要一些帮助/提示。

如果未选择数量，如何阻止选择所需选项。
当数量发生变化时，有没有办法自动更新/实时更新所选纸张类型的价格/计算选项？
为什么在我的示例中我需要双击所需的纸张选项按钮以重新计算小计的正确价格？如果我在小计价格没有变化时按下它。

您可以查看演示，了解我的意思。

我是jQuery的新手。提前谢谢。

Html代码：

<h3>Select Quantity:</h3>
    <select name="quantity-select" id="quantity" onchange="subtotal()">
    <option data-price="0.00" value="0" selected>Select Quantity</option>
    <option data-price="1.49" value="55" >55 Flyers for 81.95$ / 1.49$ each</option>
    <option data-price="1.39" value="66" >66 Flyers for 91.74$ / 1.29$ each</option>
    <option data-price="1.29" value="77" >77 Flyers for 99.33$ / 1.09$ each</option>
    <option data-price="1.19" value="88" >88 Flyers for 104.72$ / 0.89$ each</option>
    </select>

<h3>Select Paper:</h3>
    <ul class="paper">
    <li data-price="0.00" onclick="subtotal()">Standard Paper<br>(+0.00$)</li>
    <li data-price="0.15" onclick="subtotal()">Double Thick Paper<br>(+0.15$/piece)</li>
    <li data-price="0.25" onclick="subtotal()">Triple Thick Paper<br>(+0.25$/piece)</li>
</ul>

<h3>Extra Options:</h3>
    <input name="box1" value="nolaminating" id="nolaminating" data-price="0.00" type="radio" onchange="subtotal()">No Laminating (+0.00$)<br>
    <input name="box1" value="matte" id="matte" data-price="50.00" type="radio" onchange="subtotal()">Matte Laminating (+50.00$)<br>
    <input name="box1" value="gloss" id="gloss" data-price="75.00" type="radio" onchange="subtotal()">Gloss Laminating (+75.00$)<br>


<div class="prices"> 

    <h3>Flyers = $<span class="sum" id="flyers">0.00</span></h3>
    <h3>Paper = $<span class="sum" id="papertype">0.00</span></h3>
    <h3>Extra Options = $<span class="sum" id="extraoptions">0.00</span></h3>

</div>

<h3>Subtotal = $<span id="subtotal">0.00</span></h3>

脚本代码：

var flyersprice = '0.00';
var paperoptions = '0.00';
var extraoptions = '0.00';

function subtotal(){

    var price = $("#quantity option:selected").attr("data-price");

    flyersprice = $("#quantity option:selected").val() * price;

    $("#flyers").text(flyersprice.toFixed(2));

    $(".paper li").click(function(){
        var paperoptions = $(this).data("price") * $("#quantity option:selected").val();
        $("#papertype").text(paperoptions.toFixed(2));
    });
    $('#papertype').change(subtotal);

    $("input[type=radio]").change(function(){
        var extraoptions = $(this).data("price");
        $("#extraoptions").text(extraoptions);
    });
    $('input').change(subtotal);

    var sum = 0;
    $('.sum').each(function() {
      sum += +$(this).text();    
    });
    $("#subtotal").text(sum.toFixed(2));
}

Answer 1

如果未选择数量，如何阻止选择所需的选项。

您不需要这样做，请参阅下面的演示

当数量发生变化时，有没有办法自动更新/实时更新所选纸张类型的价格/计算选项？

是的，您只需要保留这些输入的值

为什么在我的示例中，我需要双击所需的纸张选项按钮以重新计算小计的正确价格？如果我在小计价格没有变化时按下它。

这是正常的，因为你把两个事件放在同一个按钮“onclick”+“bind”

上

这就是你需要做的事情

    var selectedPaper = null;    
function subtotal(){
        var price=  $("#quantity option:selected").attr("data-price");
        if($("#quantity").val() == 0){
            $("#papertype").text("0.00");
            $("#extraoptions").text("0.00");
            $("input[type=radio]").attr('checked',false)
            selectedPaper = null;
        }
        flyersprice = $("#quantity").val() * price;
        $("#flyers").text(flyersprice.toFixed(2));

        var sum = 0;
        $('.sum').each(function() {
          sum += +$(this).text();    
        });
        $("#subtotal").text(sum.toFixed(2));
   }
$(function(){
     $("#quantity").on('change',function(){ 
        if(selectedPaper){
            $(".paper li").eq(selectedPaper).trigger('click');
        }
        subtotal();
     });  
     $(".paper li").on('click',function(){
       if($("#quantity").val() != 0){
          var paperoptions = $(this).data("price") * $("#quantity").val();
          $("#papertype").text(paperoptions.toFixed(2));
           selectedPaper = $(".paper li").index(this);
           subtotal();
        }else{
             $("#papertype").text("0.00");
            selectedPaper = null;
        }
     });  
     $("input[type=radio]").on('change',function(){
       if($("#quantity").val() != 0){
            var extraoptions = $(this).data("price");
            $("#extraoptions").text(extraoptions);
           subtotal();
        }else{
             $("#extraoptions").text("0.00");
            selectedPaper = null;
        }
     });
})

这是DEMO

如果未选择数量，则阻止选择选项，如果数量已更改，则自动更新价格

1 个答案: