如何使用jquery從表單中的數據創建一個帶div的div？

Question

我有一些數學計算，然後我輸出在

元素的股利。

我很想做的是創建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正確的結果是這樣的

功能全面（fValue，iDecimals）{iPower = Math.pow（10，iDecimals）; return Math.round（fValue * iPow）/ iPow; }

函數div（fNumerator，fDominominator）{ return（fDenominator == 0？0：fNumerator/fDenominator）; }

$（文件）。就緒（函數（）{

$（函數（）{ $（ 「＃結果」）提交（函數（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(); 
    }); 

    }); 

}); 

我想製作的是這有點兒事與淡入與相關數據，並預置到＃代碼，結果格

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

提交數據目前這只是創建一個'愚蠢的'div在這一刻，你可以從結果中看到。

當我提交一組新的表單輸入時，我也喜歡這樣做'更新/重置'。

沒有多少請問我知道......

Answer 1

​​

的問題是，你的報價都是不正常的。請注意，除非您轉義它們，否則不能使用雙引號來啓動樣式元素，而是選擇單引號而不是樣式之間的逗號而不是逗號。

編輯

爲了使這個多一點更清晰的（這裏的的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在這一刻，你可以從結果中看到。

當我提交一組新的表單輸入時，我也喜歡這樣做'更新/重置'。

沒有多少請問我知道......