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

【问题标题】：How to toggle tabs to show or hide on button click in code mirror如何切换选项卡以显示或隐藏代码镜像中的按钮单击
【发布时间】：2019-10-24 11:40:28
【问题描述】：

我正在为一个网站制作一个 python 编辑器，并且为此目的我正在使用 Code Mirror 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 转到下一行时，选项卡变得不可见。我还在基于这篇文章的点击功能中将样式属性附加到新创建的选项卡中

Add CSS rule via jQuery for future created elements

【问题讨论】：

标签： javascript python jquery css codemirror

【解决方案1】：

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

<style>.cm-tab{background:url();}</style>
<style id="tab-style">.cm-tab{visibility: hidden;}</style>

然后在javascript中修改#tab-style的html。

$("#tab-style").html(".cm-tab{visibility:visible}");

【讨论】：