1

我有两个文件

  1. 索引.php
  2. 代码.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 像这样

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

和

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

并且有两种类型的 pre 标签 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再次重新定义为一个空数组...只需删除第二window.editors = [];行。

其次：这里的变量实际上是什么值id？

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

您正在阅读 的id，textarea但看起来是undefined，因为 HTML 中没有ids。

这一行中的一个类似错误：

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

我想id应该在'print-result3'这里，但undefined现在。

请注意，添加到id's 正文的附加数字是按提供的顺序添加的$('input[type=button]').each()。这应该是文档中元素的顺序。请注意，原件button是您在屏幕上看到的最后一个。

我认为我的答案缺乏解释，如何将按钮定位到编辑器和相应的print-resultX. 我将在这里尝试解释一下：

在原始<input id="print-resultX" ... /> X应该是一些总print-result输入，即一些 CodeMirror 对象，因为当你克隆时form，所有克隆都放在这个原始形式之前。在克隆期间，相应X的 s 被添加到每个id值的主体中。

该X值execute(idx)作为参数传递给函数idx，即单击的按钮“知道”，应该在 中处理哪个编辑器execute()，因为它X也表示editors数组中的索引。

添加idx到 的正文 (= 'print-result') 时id，您可以将操作定位到特定的打印结果字段。

于 2013-07-12T08:30:06.360 回答