Question

我一直在尝试将主题从默认更改为钴等等，每次单击按钮时都会切换它，但它会切换到主题一次，并且不会切换回来。因此我为什么在这里。有人可以帮助指导正确的方向吗？这个简单的任务变得很烦人。

我用。（点）

替换了代码的不相关部分

HTML

<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
.
. 
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
.
.
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
  <textarea id=code name=code>
    .
    .
    <iframe id=preview></iframe>

    <p>Select a theme: <select onchange="selectTheme()" id=select>
        <option value="0" selected>default</option>
        .
            .
        <option>night</option>
    </select></p>

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

的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() {
    $('#changetheme').click(themechange);

    function themechange() {
        if (
            $("#select").val(0)) {
            $("#select").val(7).trigger('change');
        }
        else if (
            $("#select").val(7)) {
            $("#select").val(0).trigger('change');
        }
    }
});

Answer 1

要使用jQuery切换内容，请使用toggleClass（）函数。

http://api.jquery.com/toggleClass/

$(element).toggleClass("className");

单击时切换CodeMirror主题

1 个答案: