如何切換選項卡以顯示或隱藏代碼鏡像中的按鈕單擊

Question

我正在為一個站點制作一個 python 編輯器，為此我正在使用 Code Mirror javascript 庫。 我有一個名為toggle invisibles的按鈕。 如果用戶按下按鈕，將顯示空格和行尾標記。 我也想顯示標簽。 由於代碼鏡像僅顯示空格和行尾，因此我添加了一種手動方式來顯示選項卡。

在代碼鏡像中，選項卡有 html <span class="cm-tab" cm-text=" "></span> 。 我已經為 css 中的.cm-tab class 設置了一個背景圖像，以便這些圖像可以看到標簽。

因為，我想切換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();});
});

問題是，當我單擊按鈕時，選項卡與背景圖像一起顯示。 但是當我點擊進入 go 到下一行時，標簽變得不可見。 我有 append 新創建的選項卡的樣式屬性也在基於這篇文章的點擊 function

通過 CSS 規則通過 jQuery 為未來創建的元素添加

Answer 1

我創建了兩個樣式標簽並提供了.cm-tab class。 這是我的代碼：

<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}");