jquery - 根据选择下拉选项更改结果

Question

我创建了一个小表格，根据每个人的实例或整个组来计算人数和他们愿意花费的金额:

https://jsfiddle.net/g7zz6/661/

Men: <input type="text" class="number men-value" value="1"><br>
Women: <input type="text" class="number women-value" value="1"><br>
Total Spend: <input type="text" class="number amount-value" placeholder="Amount" name="amount">
<select>
<option>per person</option>
<option>group total</option>
</select>

<div class="group-total-spend">
$<span class="total-amount-group"></span> Group Total<br>
$<span class="total-amount-per-person"></span> Per Person
</div>

一些我遇到的问题需要添加:

当选择“per person”选项时，我只需要“Group Total”可见”，当选择“group total”时，我只需要“Per Person”可见。

另一个问题是，我不希望在所有 3 个字段都填写完毕之前显示计算结果。我现在的解决方法是将 Men 和 Women 字段的默认值为 1 - 因为如果它们的值都为 0，我得到的值为“NaN”。最好不要让 0 同时出现在 Men 和 Women 字段中。现在，只要输入任何值，我就会显示容器“.group-total-spend”。如果我能想出一种方法将所有 3 种方法结合起来使其可见，那么这将变得过时。

$('input[name=amount]').keyup(function(){
if($(this).val().length)
$('.group-total-spend').show();
    else
    $('.group-total-spend').hide();
});

提前感谢任何可以提供帮助的人。我知道这可能很简单，但我只是开始接触 jQuery 并边学边做。

Answer 1

请检查这个 JSFiddle 我更新了代码:https://jsfiddle.net/g7zz6/664/希望对您有所帮助:)

HTML:

Men <input type="text" class="number men-value" value="1"><br>
Women <input type="text" class="number women-value" value="1"><br>
Total Spend <input type="text" class="number amount-value" placeholder="Amount" name="amount">
<select id="option">
<option value="perPerson">per person</option>
<option value="groupTotal">group total</option>
</select>

<div class="group-total-spend">
    <p id="groupTotal">$<span class="total-amount-group"></span> Group Total</p>
    <p id="perPerson">$<span class="total-amount-per-person"></span> Per Person</p>
</div>

JS:

/* Start Group Spend */

/* Allow Numbers Only */
jQuery('.number').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

/* Calculate Total */
$(document).ready(function(){
    $("input.number").keyup(function(){
        calcTotal();                                                                  
    });

    $("select#option").change(function() {
        calcTotal();
    });
});

function calcTotal() {

    $('p#perPerson').hide();
    $('p#groupTotal').hide();

    var val1 = parseInt($(".men-value").val(), 10);
    var val2 = parseInt($(".women-value").val(), 10);        
    var val3 = parseInt($(".amount-value").val(), 10);        

    if (isNaN(val1) || isNaN(val2) || isNaN(val3)) {              
        return false;
    }

    var group = val1+val2         
    var tresult = group * val3
    var ppresult = tresult / group                             
    var option = $("select#option").val();

    switch(option) {
        case "perPerson":
            $('span.total-amount-per-person').text(ppresult);
            $("p#perPerson").show();
            break;
        case "groupTotal":
            $('span.total-amount-group').text(tresult);
            $("p#groupTotal").show();                  
            break;
    }
}
/* End Group Spend */

CSS:

.group-total-spend p {display:none;margin-top:10px;border-top:1px solid #000;padding-top:10px;width:50%;}