Javascript标签系统

Question

var editor;
window.addEventListener('load',function () {

var textarea = document.getElementById("editor");
editor = CodeMirror.fromTextArea(textarea, {
  lineNumbers: true,
  mode: "htmlmixed",
  tabSize: 3,
  value: 'console.log("Hello, World");',
  theme: 'monokai',
});
})
window.addEventListener('load',function () {
    
$(document).ready(function() {
  $('#tab1').css('background-color', '#272822');
  var active = 'tab1';
  var html_code = '//Html code goes here';
  var css_code = '//Css code goes here';
  var js_code = '//Js code goes here';
  $("#tab1").trigger('click');
  //Tab system
  $('.tab').click(function() {
    var currentvalue = editor.getValue();
    if (currentvalue != "") {
      if (active == "tab1") {
        html_code = currentvalue;
      } else if (active == "tab2") {
        css_code = currentvalue;
      } else if (active == "tab3") {
        js_code = currentvalue;
      }
    }

    active = $(this).attr("id");
    if (active == "tab1") {
      editor.setValue(html_code);
    } else if (active == "tab2") {
      editor.setValue(css_code);
    } else if (active == "tab3") {
      editor.setValue(js_code);
    }
    $('.tab').css('background-color', '#352a2aa9');
    $(this).css('background-color', '#272822');
  })

  $('.compile').click(function () {
      alert(html_code + js_code + css_code);
  })
})
})

.tabs {
    margin-top: 1%;
    background-color: #fff;
    display: flex;
}

.tab {
    padding-left: 20px;
    width: 20%;
    background-color: #352a2aa9;
    color: white;
    margin-right: 10px;
    border-radius: 5px 5px 0 0;
}

.tab:hover {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.55.0/addon/hint/show-hint.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="code-editor">
            <div class="tabs">
                <div class="tab" id="tab1">
                    index.html
                </div>
                <div class="tab" id="tab2">
                    index.css
                </div>
                <div class="tab" id="tab3">
                    index.js
                </div>
            </div>
            <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
        </div>
        <button class="compile">submit</button>

我正在尝试为我的代码编辑器制作一个标签系统。 例如，我有 3 个选项卡、HTML 选项卡 CSS 选项卡和一个 javascript 选项卡。 问题是当我再次尝试切换选项卡时，HTML 获取 CSS 选项卡值，而 js 选项卡也获取 CSS 值。 这是我的代码：

 $( document ).ready(function(){
        $('#tab1').css('background-color','#272822');
        var active = 'tab1';
        var html_code = '//Html code goes here';
        var css_code = '//Css code goes here';
        var js_code = '//Js code goes here';
        check_tab();
        $("#tab1").trigger('click');
        //Tab system
        $('.tab').click(function(){
            $('.tab').css('background-color','#352a2aa9');
            $(this).css('background-color','#272822');
            $(this).css('color','white');

            if (this.id == 'tab2' && active == 'tab1') {
                html_code = editor.getValue();
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
                           
            } 
            if (this.id == 'tab3' && active == 'tab2') {
                css_code = editor.getValue();
                if(js_code !== undefined){
                    active = 'tab3';
                    editor.setValue(js_code);
                } 
            }     
            if (this.id == 'tab2' && active == 'tab3') {
                js_code = editor.getValue();
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
            }  
            if (this.id == 'tab1' && active == 'tab3') {
                js_code = editor.getValue();
                if(html_code !== undefined){
                    active = 'tab1';
                    editor.setValue(html_code);
                }
            }  

            if (this.id == 'tab1' && active == 'tab2') {
                css_code = editor.getValue();
                if(html_code !== undefined){
                    active = 'tab1';
                    editor.setValue(html_code);
                }
            }

            if (this.id == 'tab2' && active == 'tab1') {
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
            }
            if (this.id == 'tab3' && active == 'tab1') {
                html_code = editor.getValue();
                if(js_code !== undefined){
                    active = 'tab3';
                    editor.setValue(js_code);
                }
            }
            check_tab();
        })

        function check_tab(){
            if(active == 'tab1'){
                editor.on('change',function (editor) {
                    html_code = editor.getValue();
                })
            }
            if(active == 'tab2'){
                editor.on('change',function (editor) {
                    css_code = editor.getValue();
                })
            }
            if(active == 'tab3'){
                editor.on('change',function (editor) {
                    js_code = editor.getValue();
                })
            }
        }

我正在使用 CodeMirror 来显示代码编辑器。 如果问题缺少信息，我将添加代码。 提前致谢！ HTML 代码：

<div class="code-editor">
            <div class="tabs">
                <div class="tab" id="tab1">
                    index.html
                </div>
                <div class="tab" id="tab2">
                    index.css
                </div>
                <div class="tab" id="tab3">
                    index.js
                </div>
            </div>
            <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
        </div>

问题是当我单击提交按钮时，它会带来变量的旧值，如果我切换标签，它只会更改变量值。

Answer 1

我让它更简单了一点，但它可以进一步改进，但我希望你了解这些变化，以便在下面的演示中抢夺。

演示

$(document).ready(function() {

  var editor;
  var textarea = document.getElementById("editor");
  editor = CodeMirror.fromTextArea(textarea, {
    lineNumbers: true,
    mode: "htmlmixed"
  });

  $('#tab1').css('background-color', '#272822');
  var active = 'tab1';
  var html_code = '//Html code goes here';
  var css_code = '//Css code goes here';
  var js_code = '//Js code goes here';
  //Tab system
  $('.tab').click(function() {
    var currentvalue = editor.getValue();
    if (currentvalue != "") {
      if (active == "tab1") {
        html_code = currentvalue;
      } else if (active == "tab2") {
        css_code = currentvalue;
      } else if (active == "tab3") {
        js_code = currentvalue;
      }
    } else {
      editor.setValue(html_code)
    }

    active = $(this).attr("id");
    if (active == "tab1") {
      editor.setValue(html_code);
    } else if (active == "tab2") {
      editor.setValue(css_code);
    } else if (active == "tab3") {
      editor.setValue(js_code);
    }
    $('.tab').css('background-color', '#fff');
    $(this).css('background-color', '#272822');
  })
  
  $("#tab1").trigger('click');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet" />


<div class="code-editor">
  <div class="tabs">
    <div class="tab" id="tab1">
      index.html
    </div>
    <div class="tab" id="tab2">
      index.css
    </div>
    <div class="tab" id="tab3">
      index.js
    </div>
  </div>
  <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
</div>