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是“假的”，所以每当你有一个带有数字的变量而你想用0代替NaN时，就可以使用|| }：

foo = foo || 0;

这是因为JavaScript's curiously-powerful || operator。因此，只需将其应用于您希望以此方式处理的代码中的任何值。您通常可以在最后执行此操作，因为涉及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);

另见updated example。

=== UPDATE ===

使用toFixed(x)，您可以得到x小数。如果您想要达到最大x个小数，则可以使用以下函数：

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

另见updated example。

=== UPDATE ===

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

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

另见updated example。

=== UPDATE ===

如果你想让代码更加小巧，可以将它与T.J.结合使用。克劳德回答;源代码可以是：

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();
        });

    });

});

另见updated example。

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

2 个答案: