1

私は2つのファイルを持っています

  1. index.php
  2. code.js

フォームを含む index.php に code.js の助けを借りていくつかのコードがあります。preタグをそのフォームに置き換えています。したがって、すべてが正常に実行されます。私の問題を理解するには、私のコードを確認する必要があります。だからまず第一に、私は自分のコードを与えています

index.php ファイル:

<html>
<head>
        <link rel="stylesheet" href="http://code.guru99.com/css/1140.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://code.guru99.com/css/styles.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="http://codemirror.net/doc/docs.css" type="text/css" media="screen" />
        <script src="http://code.guru99.com/php/lib/codemirror.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">></script>
        <link rel="stylesheet" href="http://code.guru99.com/Sanjay/lib/codemirror.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script>
        <script type="text/javascript" src="cperl.js"></script>
        <script src="code.js"></script>
</head>
<body>
<style type="text/css">
.CodeMirror {
    border: 1px solid #eee;
    height: auto;
    width : 630px;
}
.CodeMirror-scroll {
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}
</style>
<p>Integer : whole numbers e.g. -3, 0, 69. The maximum value of an integer is platform-dependent. On a 32 bit machine, its usually around 2 billion. 64 bit machines usually have larger values. The constant PHP_INT_MAX is used to determine the maximum value.</p>
<pre class="codeguru">say 'hi';</pre>
Let us now look at how PHP determines the data type depending on the attributes of the supplied data.
<pre class="codeguru">say 'hello';</pre>
Floating point numbers
<pre class="codeguru">say 'you r amazing';</pre>
Character strings
<pre class="codeNrun">say 'i am fine';</pre>

<form class="hidden code-box" method="GET" name="sample">
    <div dir="ltr">
        <textarea class="php" name="codeguru"></textarea>
    </div>
    <input type="button" value="Run" />
    <br/>
    <br/>Output:
    <br/>
    <br/>
    <textarea id="print-result4" disabled="true" cols="77"></textarea>
    <br/>
</form>
<form class="hidden code-box" method="GET" name="Nosample">
    <div dir="ltr">
        <textarea class="php" name="codeNrun"></textarea>
    </div>
</form>
</body>
</html>

code.js ファイル:

$(document).ready(function () {
    var idIndex = 0;
    $('pre.codeguru').each(function () {
        var pre = this;
        var form = $('form[name=sample]').clone();
        $(form).removeAttr('name');
        $(form).removeClass('hidden');
        $($(form).find('textarea')[0]).val($(pre).text());
        var id = $(pre).attr('id');
        $(form).find('div textarea[name=code]').first().attr('id', id);
        $(form).find('#print-result4').first().attr('id', 'print-result' + idIndex++);
        $(pre).replaceWith(form);
    });

    var n = 0;
    $('input[type=button]').each(function () {
        $(this).click(function (x) {
            return function () {
                execute(x);
            };
        }(n++))
    });

    window.editors = [];
    $('textarea[name=codeguru]').each(function () {
        window.editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            matchBrackets: true,
            mode: "perl",
            tabMode: "shift"
        });
        editors.push(editor);
    });
     $('pre.codeNrun').each(function () {
        var pre = this;
        var form = $('form[name=Nosample]').clone();
        $(form).removeAttr('name');
        $(form).removeClass('hidden');
        $($(form).find('textarea')[0]).val($(pre).text());
        var id = $(pre).attr('id');
        $(form).find('div textarea[name=codeNrun]').first().attr('id', id);
        $(pre).replaceWith(form);
    });
    window.editors = [];
    $('textarea[name=codeNrun]').each(function () {
            window.editor = CodeMirror.fromTextArea(this, {
            lineNumbers: true,
            matchBrackets: true,
            mode: "perl",
            tabMode: "shift"
        });
        editors.push(editor);
    });
});

function execute(idx) {
    p5pkg.CORE.print = function (List__) {
        var i;
        for (i = 0; i < List__.length; i++) {
            document.getElementById('print-result' + idx).value += p5str(List__[i])
        }
        return true;
    };

    p5pkg["main"]["v_^O"] = "browser";
    p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm";
    p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm";

    var source = editors[idx].getValue();

    var pos = 0;
    var ast;
    var match;
    document.getElementById('print-result' + idx).value = "";

    try {
        var start = new Date().getTime();
        var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]);
        var end = new Date().getTime();
        var time = end - start;
        // run
        start = new Date().getTime();
        eval(js_source);
        end = new Date().getTime();
        time = end - start;
    } catch (err) {
        //document.getElementById('log-result').value += "Error:\n";
    }
}

これで、このように sample と Nosample という 2 つのフォーム名があることがわかります

<form class="hidden code-box" method="GET" name="sample">

と

<form class="hidden code-box" method="GET" name="Nosample">

そして、このように2種類の事前タグcodeguruとcodeNrunがあります

<pre class="codeguru">say 'you r amazing';</pre>

と

<pre class="codeNrun">say 'i am fine';</pre>

したがって、このプリコードをフォームに置き換えると、実行しようとすると、出力が別のテキストエリアに出力され、なぜこれが起こるのか理解できません。

4

1 に答える 1

1

コードに余分なものがありwindow.editors = [];ます。

最初にeditors配列を作成し、いくつかの CodeMirror オブジェクトをプッシュしてeditorsから、空の配列に再定義します... 2window.editors = [];行目を削除するだけです。

id第二に、ここでの変数の値は実際には何ですか?

$(form).find('div textarea[name=code]').first().attr('id', id);

の を読んでいますidが、HTMLに がないため、textareaのように見えます。undefinedid

この行の同様の間違い:

$(form).find('div textarea[name=codeNrun]').first().attr('id', id);

私はここにいるidべきだと思いますが、今です。'print-result3'undefined

idのボディへの追加の数字は、指定された順序で追加されることに注意してください$('input[type=button]').each()。これは、ドキュメント内の要素の順序であるはずです。buttonオリジナルは、画面に表示される最後のものであることに注意してください。

私の答えには、ボタンをエディターにターゲットにする方法と対応するprint-resultX. 私はここでそれを説明しようとします：

のクローンを作成すると、すべてのクローンがこの元のフォームの前に配置されるため、元のフォームに<input id="print-resultX" ... /> Xは合計print-result入力数、つまり CodeMirror オブジェクトの数が必要です。form複製中に、対応するが各値Xの本体に追加されます。id

この値は引数として function にX渡されます。つまり、クリックされたボタンは、配列内のインデックスも表すため、 でどのエディタを処理する必要があるかを「認識」します。execute(idx)idxexecute()Xeditors

idxの本体 (= 'print-result') に追加すると、idアクションの対象を特定の print-result フィールドにすることができます。

于 2013-07-12T08:30:06.360 に答える