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

Question

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

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

因为我想切换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();});
});

问题是，当我单击按钮时，选项卡与背景图像一起显示。但是，当我单击Enter转到下一行时，选项卡变得不可见。我在基于此帖子的click函数中也将style属性附加到了新创建的选项卡中

Add CSS rule via jQuery for future created elements

我正在为网站制作python编辑器，并且为此目的使用了代码镜像javascript库。我有一个名为“切换不可见”的按钮。如果用户按下按钮，则空格和...的结尾和结尾]

Answer 1

我创建了两个样式标签并提供了.cm-tab类。这是我的代码：