0

我计算了一些数学，然后在 div 中输出

元素。

我想做的是用 CSS 创建一个 div，它从计算结果中获取它的值......

像这样的东西-

$("#code-results").append("<div style=" width: "OriginalResult", margin: "MarginResult" >This is some custom text</div>");

其中 OriginalResult 和 MarginResult 是我的表单输入数学的计算结果。

但我无法让它工作。我猜这就是我添加CSS的方式。

有任何想法吗？

编辑

为了更清楚一点（这里是 JSFiddle - http://jsfiddle.net/sturobson/mDfe6/19/）

JS获取表单数据并计算它然后正确appendTo的结果是这样的

函数 round(fValue, iDecimals) { var iPow = Math.pow(10, iDecimals); 返回 Math.round(fValue * iPow) / iPow; }

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

$(文档).ready(函数() {

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

   }); 

});

我想要创建的是这种数据在提交时淡入相关数据并添加到#code-results div

$("#example").css({"background-color" : "red", "height" : "200px", "width" : "200px", "margin" : " + MarginResult + %", "padding" : " + PaddingResult + %", "border" : "1px solid black", "border-width" : " + border + px" });

从结果中可以看出，目前这只是创建了一个“哑”的 div。

当提交一组新的表单输入时，我也希望它能够“更新/重置”。

我问的不多我知道...

4

1 回答 1

1 
$(document).ready(function() {
    var originalResult = 100;
    var marginResult = 100;

    $("#code-results").html("<div style='width: " + originalResult + "; margin: " + marginResult + "' >This is some custom text</div>");

});

问题是你的报价完全不合时宜。请注意，除非您对它们进行转义，否则您不能使用双引号来启动样式元素，我选择了单引号，并且还注意到样式之间的分号而不是逗号。

编辑

为了更清楚一点（这里是 JSFiddle - http://jsfiddle.net/sturobson/mDfe6/19/）

JS获取表单数据并计算它然后正确appendTo的结果是这样的

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

}); 

});

我想要创建的是这种数据在提交时淡入相关数据并添加到#code-results div

$("#example").css({"background-color" : "red", "height" : "200px", "width" : "200px", "margin" : " + MarginResult + %", "padding" : " + PaddingResult + %", "border" : "1px solid black", "border-width" : " + border + px" });

从结果中可以看出，目前这只是创建了一个“哑”的 div。

当提交一组新的表单输入时，我也希望它能够“更新/重置”。

我问的不多我知道...

于 2012-06-08T14:22:22.280 回答