我一直在尝试将主题从默认更改为钴主题，但我不知道我做错了什么。谁能帮助指导我正确的方向，并解释我做错了什么？
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>
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style>
</head>
<body>
<p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas>
<script>
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);
</script>
</body>
</html></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);}
最佳答案
将最底部的代码更改为:
$(function() {
$('#changetheme').click(toggletheme);
function toggletheme() {
$("#select").val(8).trigger('change');
}
});
它不起作用的原因是您选择了 id 为 changetheme 的 a 元素，而实际按钮是 button元素。另一个问题是，仅更改选择菜单的值不会触发更改事件，因此您必须手动触发它。
关于javascript - CodeMirror 从按钮更改主题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18559621/