如果结果是NaN或0那么结果0 w/jQuery

Question

使用此代码,用户可能会在"数字"表单字段中输入0或根本不输入任何内容.是否存在"全部捕获",以便如果用户执行此操作,则NaN或结果0.0000%仅替换为0？我认为这需要两个逻辑(？)一个用于NaN替换,一个用于更改.appendTo结果,以便它只显示0而不是0.00000%

这是一个JSFiddle - http://jsfiddle.net/sturobson/xTEKm/39/

这是jquery -

$(document).ready(function() {

$(function(){
$("#result").submit(function(e) {
    e.preventDefault();

    var ele = $("#element").val(),
        target = $("#target").val(),
        context = $("#context").val(),
        border = $("#border").val(),
        margin = $("#margin").val(),
        padding = $("#padding").val();

    console.log(ele, target, context, border, margin, padding);

    var DoubleMargin = parseInt(margin, 10) * 2;
    var DoublePadding = parseInt(padding, 10) * 2;
    var DoubleBorder = parseInt(border, 10) * 2;


    var ActualTarget = parseInt(target, 10) - parseInt(DoubleBorder, 10) - parseInt(DoubleMargin, 10) - parseInt(DoublePadding, 10) * 1;
    var result3 = parseInt(target, 10) - parseInt(DoubleMargin, 10) * 1;
    var MarginResult = ((parseInt(margin, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var PaddingResult = ((parseInt(padding, 10) / parseInt(target, 10)) * 100).toFixed(5);
    var OriginalResult = ((parseInt(ActualTarget, 10) / parseInt(context, 10)) * 100).toFixed(5);


    var BorderResult = parseInt(target, 10) - parseInt(border, 10) * 1;


    //$(".result").append(ele + " " + result + "%");
    $("<p></p>", {
        html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
    }).hide().appendTo("#code-results").fadeIn();
});

}); 

});

任何想法？

Answer 1

NaN是"falsey",所以任何时候你有它的一些变量,你要替换0的NaN,你可以使用||:

foo = foo || 0;

这是因为JavaScript的奇怪强大的||运算符.因此,只需将其应用于您希望以此方式处理的代码中的任何值.你通常可以在最后完成它,因为任何涉及NaN结果的数值计算NaN,所以它通过计算很好地传播.

在显示0而不是0.00000%,你是非常正确的,你只需要添加一些逻辑来做到这一点.我不太确定你的代码在哪里可以做到,但逻辑并不复杂,例如使用if:

if (variable === 0) {
    // Just show 0
}
else {
    // Show the full thing
}

...或与三元运算符内联:

"text " + (variable === 0 ? "0" : (variable + "%")) + " more text"

Answer 2

在getter转换一次:

var ele = $("#element").val(),
    target = (isNaN(target = parseInt($("#target").val(), 10)) ? 0 : target),
    context = (isNaN(context = parseInt($("#context").val(), 10)) ? 0 : context),
    border = (isNaN(border = parseInt($("#border").val(), 10)) ? 0 : border),
    margin = (isNaN(margin = parseInt($("#margin").val(), 10)) ? 0 : margin),
    padding = (isNaN(padding = parseInt($("#padding").val(), 10)) ? 0 : padding);

另请参阅更新的示例.

===更新===

使用toFixed(x),您将获得完全x小数.如果要获得最大x小数,可以使用以下函数:

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

另请参阅更新的示例.

===更新===

下一个问题是,分数的分母必须是非零值.如果分母为零,您可以添加一个返回零而不是NaN的除法函数:

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

另请参阅更新的示例.

===更新===

如果你想让代码更加小巧,你可以将它与TJ Crowder的答案结合起来; 源代码可以是:

function round(fValue, iDecimals) {
    var iPow = Math.pow(10, iDecimals);
    return Math.round(fValue * iPow) / iPow;
}

function div(fNumerator, fDenominator) {
    return (fDenominator == 0 ? 0 : fNumerator / fDenominator);
}

$(document).ready(function() {

    $(function(){
        $("#result").submit(function(e) {
            e.preventDefault();

            var ele = $("#element").val(),
                target = parseInt($("#target").val(), 10) || 0,
                context = parseInt($("#context").val(), 10) || 0,
                border = parseInt($("#border").val(), 10) || 0,
                margin = parseInt($("#margin").val(), 10) || 0,
                padding = parseInt($("#padding").val(), 10) || 0;

            console.log(ele, target, context, border, margin, padding);

            var DoubleMargin = margin * 2;
            var DoublePadding = padding * 2;
            var DoubleBorder = border * 2;


            var ActualTarget = target - DoubleBorder - DoubleMargin - DoublePadding * 1;
            var result3 = target - DoubleMargin * 1;
            var MarginResult = round(div(margin, target) * 100, 5);
            var PaddingResult = round(div(padding, target) * 100, 5);
            var OriginalResult = round(div(ActualTarget, context) * 100, 5);


            var BorderResult = target - border * 1;


            //$(".result").append(ele + " " + result + "%");
            $("<p></p>", {
                html: ele + " {<br><span>width: " + OriginalResult + "%;" + " /* " + ActualTarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + MarginResult + "%; " + "<br>padding: " + PaddingResult+ "%;" + "<br> </span>}"
            }).hide().appendTo("#code-results").fadeIn();
        });

    });

});

另请参阅更新的示例.