2

http://jsbin.com/uJUzU/8/edit

我一直在尝试将主题从默认更改为钴和 idk 我做错了什么。谁能帮助指导我正确的方向，并解释我做错了什么？

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror.net/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
  <textarea id=code name=code>
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8&gt;
    &lt;title&gt;HTML5 canvas demo&lt;/title&gt;
    &lt;style&gt;p {font-family: monospace;}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Canvas pane goes here:&lt;/p&gt;
    &lt;canvas id=pane width=300 height=200&gt;&lt;/canvas&gt;
    &lt;script&gt;
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');

      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea>
    <iframe id=preview></iframe>

    <p>Select a theme: <select onchange="selectTheme()" id=select>
        <option value="0" selected>default</option>
        <option value="1">3024-day</option>
        <option value="2">3024-night</option>
        <option value="3">ambiance</option>
        <option value="4">base16-dark</option>
        <option value="5">base16-light</option>
        <option value="6">blackboard</option>
        <option value="7">cobalt</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>lesser-dark</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>neat</option>
        <option>night</option>
    </select></p>

  <button id="changetheme" onclick="themechange()" style="margin-top: -35px; float: right;">Cobalt</button>
</body>
</html>

CSS

.CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
}

iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
}

Javascript

// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
});

// Sets the theme
var input = document.getElementById("select");

function selectTheme() {
    var theme = input.options[input.selectedIndex].innerHTML;
    editor.setOption("theme", theme);
}

function themechange() {
    var cobalt = input.options[input.value = "7"].innerHTML;
    editor.setOption("theme", cobalt);}
4

1 回答 1

3

将最底部的代码更改为：

$(function() {
    $('#changetheme').click(toggletheme);

    function toggletheme() {
        $("#select").val(8).trigger('change');
    }
});

它不起作用的原因是因为您选择了一个a带有 id 的元素changetheme，而实际的按钮是一个button元素。另一个问题是仅仅改变选择菜单的值并不会触发改变事件，所以你必须手动触发它。

于 2013-09-01T15:14:25.263 回答