Question

我有两个文件

的index.php
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";
    }
}

所以现在你可以看到有两个表单名称样本和像这样的样本

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

和

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

有两种类型的预标签codeguru和codeNrun就像这样

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

和

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

所以，当我用表单替换这个预编码时，当我尝试运行时，输出将在另一个textarea中打印，我无法理解为什么会发生这种情况。

Answer 1

您的代码中还有一个window.editors = [];。

首先创建一个editors数组，然后将其推入一些CodeMirror对象，然后再次将editors重新定义为空数组...只需删除第二个window.editors = [];行。 / p>

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

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

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

这一行中存在类似的错误：

id

我想这里$(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个输入，即一些CodeMirror对象，因为当您克隆print-result时，所有克隆放在此原始表单之前。在克隆过程中，相应的form会被添加到每个X值的正文中。

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

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

表格替换为textarea不给出不同的输出

1 个答案: