0

いくつかの数学が計算されており、それを div の 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/）

フォームデータを取得して計算し、appendToの結果が正しくなるJSはこれです

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を作成するだけです。

また、フォーム入力の新しいセットが送信されたときに、これを「更新/リセット」したいと思います。

あまり聞かない 知ってる...

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/）

フォームデータを取得して計算し、結果が正しくappendToになるJSはこれです

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 に答える