如何总结jquery产生的动态值？

时间：2017-02-17 15:34:54

标签： jquery

嗨，大家好，我是全新的，实际上我即将解决问题，并且能够从这里获得（几乎）解决方案

How to sum Jquery Outputs

我知道这个问题是我无法输出总是让我感到悲伤的是，当涉及到jquery时我真的很棒

我想要做的就是总结所有，所以我可以在这里获得总账单是我的代码

$(document).ready(function() {

	$('input:radio[name="meal"]').change(function(ev){
        
		if ($(this).val() == 'Burger with fries') {     
			var meal = 20;
		}
        else {            
			var meal = 30;
        }	
		
        $('#meal').html((meal).toFixed(2));

    });	

	$('input:radio[name="drinks"]').change(function(ev){
	
		if ($(this).val() == 'Ice Tea') {
            var drinks = 1;
        }
        else if ($(this).val() == 'Coke') {
            var drinks = 1.20;
        }
        else if ($(this).val() == 'Lemonade') {
            var drinks = 2;
        }
        else if ($(this).val() == 'Water') {
            var drinks = 1.75;
        }
        else if ($(this).val() == 'Hot choco') {
            var drinks = 3;
        }
        else if ($(this).val() == 'Hot coffee') {
            var drinks = 1.25;
        }
        else {
             var drinks = 0;
        }
		
		$('#drinks').html((drinks).toFixed(2));
	});	


	$('input:radio[name="extras"]').change(function(ev){
		
		if ($(this).val() == 'Rice') {
            var extras = 10;
        }
		else if ($(this).val() == 'Gravy') {
            var extras = 5;
        }
        else {
             var extras = 0;
        }
		$('#extras').html((extras).toFixed(2));
	});
	
		$('textarea[name="spoon"]').keyup(function(ev){
	    
	var spoon = $(this).val().replace(/\n/g, '<br/>');
	var spoon = spoon*2;
	$("#spoon").html(spoon);	
    
	});

$('input:text[name="fork"]').keyup(function(ev){
	    
	var fork = $(this).val().replace(/\n/g, '<br/>');
	var fork = fork*1.25;
	$("#fork").html(fork);        
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: Meal</h2>
<div>
<label class="radio"><input name="meal" value="Burger with fries" type="radio"/>Burger with fries</label>
</div>
<div>
<label class="radio"><input name="meal" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>

<h2>Question 2: Drinks</h2>
<div>
<input type="radio" name="drinks" value="Ice Tea" /> Ice Tea
<input type="radio" name="drinks" value="Coke" /> Coke
<input type="radio" name="drinks" value="Lemonade" /> Lemonade
<input type="radio" name="drinks" value="Water" /> Water
<input type="radio" name="drinks" value="Hot choco" /> Hot choco
<input type="radio" name="drinks" value="Hot coffee" /> Hot coffee
<input type="radio" name="drinks" value="No drinks" /> No drinks
</div>

<h2>Question 3: Extras</h2>
<div>
<input type="radio" name="extras" value="Rice" /> Rice
<input type="radio" name="extras" value="Gravy" /> Gravy
<input type="radio" name="extras" value="No Extra" /> No Extra
</div>

<h2>Question 4: How many extra spoon?</h2>
<div>
<textarea name="spoon" rows="3"></textarea>
</div>

<h2>Question 5: How many extra fork?</h2>
<div>
<input name="fork" type="text" value="" placeholder=""/>
</div>

<hr />
<div>
<b>Meal:</b> <span id="meal"></span>
<div></div>
<b>Drinks:</b> <span id="drinks"></span>
<div></div>
<b>Extras:</b> <span id="extras"></span>
<div></div>
<b>Spoon:</b> <span id="spoon"></span>
<div></div>
<b>Fork:</b> <span id="fork"></span>
</div>

<div>
	<h3>
	<b>Total:</b><span id="total"></span>
	</h3>
 </div>

2 个答案:

答案 0 :(得分：0)

改为使用：

$('#drinks').html('string')

为了更改范围文本，您可以使用

$('#drinks').text('string')

每当您更改跨度的值（即：Meal，Dri​​nks ...）时，您都可以触发更改事件以便可以处理。一个例子是：

$("#fork").text(fork).trigger('change');

现在，您可以创建一个更改处理程序，您可以在其中更新总计。 可以使用javascript函数reduce来计算总数：

$('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
    var total = $('#meal, #drinks, #extras, #spoon, #fork')
                           .toArray().reduce(function(acc, val) {
        return acc + +val.textContent   ;
    }, 0);
    $('#total').text(total.toFixed(2));
})

摘录：

＆＃13;
＆＃13; 
$(document).ready(function() {

    $('input:radio[name="meal"]').change(function(ev){

        if ($(this).val() == 'Burger with fries') {
            var meal = 20;
        }
        else {
            var meal = 30;
        }

        $('#meal').text((meal).toFixed(2)).trigger('change');

    });

    $('input:radio[name="drinks"]').change(function(ev){

        if ($(this).val() == 'Ice Tea') {
            var drinks = 1;
        }
        else if ($(this).val() == 'Coke') {
            var drinks = 1.20;
        }
        else if ($(this).val() == 'Lemonade') {
            var drinks = 2;
        }
        else if ($(this).val() == 'Water') {
            var drinks = 1.75;
        }
        else if ($(this).val() == 'Hot choco') {
            var drinks = 3;
        }
        else if ($(this).val() == 'Hot coffee') {
            var drinks = 1.25;
        }
        else {
            var drinks = 0;
        }

        $('#drinks').text((drinks).toFixed(2)).trigger('change');
    });


    $('input:radio[name="extras"]').change(function(ev){

        if ($(this).val() == 'Rice') {
            var extras = 10;
        }
        else if ($(this).val() == 'Gravy') {
            var extras = 5;
        }
        else {
            var extras = 0;
        }
        $('#extras').text((extras).toFixed(2)).trigger('change');
    });

    $('textarea[name="spoon"]').keyup(function(ev){

        var spoon = $(this).val().replace(/\n/g, '<br/>');
        $("#spoon").text(spoon).trigger('change');

    });

    $('input:text[name="fork"]').keyup(function(ev){

        var fork = $(this).val().replace(/\n/g, '<br/>');
        $("#fork").text(fork).trigger('change');
    });



    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
        var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
            return acc + +val.textContent   ;
        }, 0);
        $('#total').text(total.toFixed(2));
    })

});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h1>Calculator base on radio buttons</h1>
<h2>Question 1: Meal</h2>
<div>
    <label class="radio"><input name="meal" value="Burger with fries" type="radio"/>Burger with fries</label>
</div>
<div>
    <label class="radio"><input name="meal" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>

<h2>Question 2: Drinks</h2>
<div>
    <input type="radio" name="drinks" value="Ice Tea" /> Ice Tea
    <input type="radio" name="drinks" value="Coke" /> Coke
    <input type="radio" name="drinks" value="Lemonade" /> Lemonade
    <input type="radio" name="drinks" value="Water" /> Water
    <input type="radio" name="drinks" value="Hot choco" /> Hot choco
    <input type="radio" name="drinks" value="Hot coffee" /> Hot coffee
    <input type="radio" name="drinks" value="No drinks" /> No drinks
</div>

<h2>Question 3: Extras</h2>
<div>
    <input type="radio" name="extras" value="Rice" /> Rice
    <input type="radio" name="extras" value="Gravy" /> Gravy
    <input type="radio" name="extras" value="No Extra" /> No Extra
</div>

<h2>Question 4: How many extra spoon?</h2>
<div>
    <textarea name="spoon" rows="3"></textarea>
</div>

<h2>Question 5: How many extra fork?</h2>
<div>
    <input name="fork" type="text" value="" placeholder=""/>
</div>

<hr />
<div>
    <b>Meal:</b> <span id="meal"></span>
    <div></div>
    <b>Drinks:</b> <span id="drinks"></span>
    <div></div>
    <b>Extras:</b> <span id="extras"></span>
    <div></div>
    <b>Spoon:</b> <span id="spoon"></span>
    <div></div>
    <b>Fork:</b> <span id="fork"></span>
</div>

<div>
    <h3>
        <b>Total:</b><span id="total"></span>
    </h3>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以使用类名称来命名单个项目金额＆＃34; itemAmount＆＃34;然后使用jquery .each函数选择单个金额并添加它们以获得总金额。

请参阅我对您的代码所做的修改，修改以粗体标记。我添加了一个函数来检查文本是否为数字isNumeric和updateTotal（）以添加项目并更新总计。

如果你想在行动https://jsfiddle.net/princedc/wnsa61g8/

中看到它，请使用此jsfiddle网址 
stopa.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{

fa.y+=asagi;
ban.y+=banasagi;
playa.y+=asagi;

if (fa.y>=fa.height/0.0) {
    asagi*=-2;
}   

if (ban.y>=ban.height/0.0) {
    banasagi*=-2;
}   

if (playa.y>=playa.height/0.0) {
    asagi*=-2;
}   
stage.frameRate = 0.01;
}
 
//Resume Button
playa.addEventListener(MouseEvent.CLICK, onaClick);
function onaClick(e:MouseEvent):void
{
timercheck.stop();

  fa.y+=yukari;
  ban.y+=banyukari;
  playa.y+=yukari;

if (fa.y>=fa.height/0.0) {
    yukari*=-2;
}

    if (ban.y>=ban.height/0.0) {
    banyukari*=-2;
}

        if (playa.y>=playa.height/0.0) {
    yukari*=-2;
}
stage.frameRate = 24;
}
相关问题
最新问题