如何切换选项卡以显示或隐藏代码镜像中的按钮单击

Question

我正在为一个站点制作一个 python 编辑器，为此我正在使用 Code Mirror javascript 库。我有一个名为 的按钮toggle invisibles。如果用户按下按钮，将显示空格和行尾标记。我也想显示标签。由于代码镜像仅显示空格和行尾，因此我还添加了一种手动方式来显示选项卡。

在代码镜像中，选项卡具有 html <span class="cm-tab" cm-text="    "></span>。我已经.cm-tab在 css 中为类设置了一个背景图像，以便这些图像可以看到选项卡。

因为，我想切换span元素的可见性，最初，我已将其设置为visibility: hidden. 在 javascript 中，当用户单击toggle invisibles按钮时，我会将可见性设置为visible.

这是代码：

CSS：

.cm-tab{

    background: url("url");

    visibility: hidden;

}

Javascript：

var showi = true;

$(".textarea-editor").each(function(index){

    var editor  = CodeMirror.fromTextArea($(this)[0],{

        mode: {name: "python", version: 3, singleLineStringErrors: true, globalVars: true}, 

        lineNumbers: true, 

        lineWrapping: true,

        indentUnit: 4,

        showInvisibles: false,

        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],

        autoCloseBrackets: true,

        maxInvisibles: 16,

        matchBrackets: true,

        indentWithTabs: true,

    });

    $("#toggleInvisible").click(function(){

        editor.setOption('showInvisibles', showi);

        var tab-visibility = showi?"visible:"hidden";

        var style = $('<style>.cm-tab {visibility:'+tab-visibility+'} 

        </style>');

        $(".cm-tab".append(style);

        showi=showi?false:true;

    });

    editor.on('change', function(e){ var txt = editor.getValue();});

});

问题是，当我单击按钮时，选项卡与背景图像一起显示。但是当我点击回车进入下一行时，标签变得不可见。我已经根据这篇文章在点击功能中将样式属性附加到新创建的选项卡

Answer 1

我创建了两个样式标签并提供了.cm-tab类。这是我的代码：<style>.cm-tab{background:url();}</style><style id="tab-style">.cm-tab{visibility: hidden;}</style>然后更改#tab-stylejavascript中的html 。$("#tab-style").html(".cm-tab{visibility:visible}");