0

http://jsfiddle.net/tZVsS/72/

クラスの最初の2つの要素のいずれかをダブルクリックすると.code、setOptionsがクラスの最後の要素にのみ適用されることがわかります.code。私が行う必要があるのは、個々の要素をダブルクリックすると、その要素に適用されるsetoptionが機能しないのはなぜですか、それを修正するために何ができるのですか？

(function () {
    var codes = document.getElementsByClassName("code");
    for (i = 0; i < codes.length; i++) {

        var $this = codes[i];
        var $unescaped = $this.innerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");

        var isspan = $this.nodeName.toLowerCase() == "span";

        $this.innerHTML = "";

        if (isspan) {
            $this.style.display = "inline-block"
        } else {
            $this.style.display = "inline"
        }

        var editor = new CodeMirror($this, {
            value: $unescaped,
            mode: 'javascript',
            lineNumbers: false,
            readOnly: true
        });
        $this.ondblclick = function () {
            editor.setOption("readOnly", false);
            editor.setOption("lineNumbers", true);
        }
    }
})();

HTMLは以下のとおりです。注：あまり使用されません。代わりに、フィドルで行ったことをさかのぼって理解を深めてください。

Some code <span class="code inline">function inline() { alert('inline code') }</span> inside
a sentence.
<div class="code">function test() { return false; }</div>
4

1 に答える 1

1

スコープの問題だけ

更新されたフィドル：http：//jsfiddle.net/tZVsS/73/

(function () {
    var codes = document.getElementsByClassName("code");
    for (i = 0; i < codes.length; i++) {
        (function ($this) { 
            var $unescaped = $this.innerHTML.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");

            var isspan = $this.nodeName.toLowerCase() == "span";

            $this.innerHTML = "";

            if (isspan) {
                $this.style.display = "inline-block"
            } else {
                $this.style.display = "inline"
            }

            var editor = new CodeMirror($this, {
                value: $unescaped,
                mode: 'javascript',
                lineNumbers: false,
                readOnly: true
            });
            $this.ondblclick = function () {
                console.log($this);
                editor.setOption("readOnly", false);
                editor.setOption("lineNumbers", true);
            }
        })(codes[i]);
    }
})();
于 2013-01-18T22:05:05.657 に答える