Question

我正在尝试制作一个表单，根据所选的选项计算出多少费用。我已经设法使其成功运行3个选项但是我无法弄清楚如何使它创建小计，这个小计应该添加变量“vpageprice”和“vmediaprice”并显示在id为“st”的单元格内”。以下是我的代码，并且是JSfiddle。

HTML

<div style="margin:auto;text-align:center;" id="form">
    <table width="300" border="1" cellspacing="0" cellpadding="0">
        <tr><th scope="col">Element</th><th scope="col">Type</th><th scope="col">Price</th></tr>

        <tr><td>Media</td><td>
                <select id="media">
                    <option value="0">None</option>
                    <option value="5">Audio</option>
                    <option value="10">Video</option>
                    <option value="12">Both</option>
                </select></td>
            <td id="mp"></td></tr>

        <tr><td>Page Style</td><td>
                <select id="pagestyle">
                    <option value="10">Seperate</option>
                    <option value="5">Content Change</option>
                </select></td>
            <td id="ps"></td></tr>

        <tr><td>Pages</td><td>
                <select id="pages">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select></td>
            <td id="pp"></td></tr>

        <tr><td colspan="2">Total</td><td id="st"></td></tr>
    </table>
</div>

的jQuery

$(document).ready(function(){    
    function mediaprice() {
        var vmediaprice = $("#media").val();
        $("#mp" ).html("£"+vmediaprice);
    }
    $("#form").change(mediaprice);
    mediaprice();    
    function pagestyleprice() {
        var vpagestyleprice = $("#pagestyle").val();
        $("#ps" ).html("£"+vpagestyleprice+" per page");
    }
    $("#form").change(pagestyleprice);
    pagestyleprice();    
    function pageprice() {
        var vpageprice = ($("#pages").val())*($("#pagestyle").val());
        $("#pp" ).html("£"+vpageprice);
    }
    $("#form").change(pageprice);
    pageprice();    
});

我希望有人可以帮助我解决这个问题，如果有人有更好/更简单的方法来制作这个表格，我会改变我所拥有的。非常感谢。

Answer 1

这是解决方案：

http://jsfiddle.net/acrashik/Q3eKA/1/

function pageprice() {
  //your stuff
  getTotal();

}
function getTotal(){
    var total = parseInt($('#pages').val(),10) * parseInt($('#pagestyle').val(),10)
        total += parseInt( $('#media').val(),10);
    $('#st').text('£' + total);
}

Answer 2

这是一个非常简单的解决方案：

$("#form").change(function() {
    $("#st").text("$" + (pageprice()+mediaprice()));
}).change();

JSFiddle

Answer 3

这是一个解决方案：

$(document).ready(function(){

function mediaprice() {
  var vmediaprice = $("#media").val();
  $("#mp" ).html("£"+vmediaprice);
  return parseFloat(vmediaprice);
}
function pageprice() {
  var vpageprice = ($("#pages").val())*($("#pagestyle").val());
  $("#pp" ).html("£"+vpageprice);
  return parseFloat(vpageprice);
}    
function pagestyleprice() {
  var vpagestyleprice = $("#pagestyle").val();
  $("#ps" ).html("£"+vpagestyleprice+" per page");
  return parseFloat(vpagestyleprice);
}

function updateAll(){
    var total = mediaprice() + pageprice(); //Order here affects
    $("#st" ).html("£"+total);
}    

$("#form").change(updateAll);
updateAll();

});

在此工作：http://jsfiddle.net/edgarinvillegas/Q3eKA/4/

编辑更好地考虑您的逻辑，这将是updateAll方法：

 function updateAll(){
    pagestyleprice();
    var total = mediaprice() + pageprice(); //Order here affects
    $("#st" ).html("£"+total);
 }

在此工作：http://jsfiddle.net/edgarinvillegas/Q3eKA/6/

干杯

jQuery，表单中的可变数学

3 个答案: