修改我的代码：当前使用toggle（）和toggleClass（）

时间：2015-05-01 14:38:35

标签： javascript jquery html css

我的一些代码无法传达它所需的内容。

关于这些ID

  • ＃HTML按钮
  • ＃CSS-按钮
  • ＃JS-按钮
  • ＃结果按钮

我添加了一个名为 .selected 的课程。我编写代码的方式很有效。但是，当我从任何这些ID中删除所选内容时，我必须添加新的CSS并添加＆＃34; display：none＆＃34;到任何相应的视口容器：

  • ＃HTML的容器
  • ＃CSS-容器
  • ＃JS-容器
  • ＃结果容器。

我意识到我可以创建一些if语句，但我也想学习一些可以帮助我的新方法/功能。我喜欢的一件事是清晰易读的代码，效率很高。所以有一堆不需要的检查和循环不是我的目标。

基于我选择使用 toggle（）的方法和 toggleClass（）在尝试手动删除时，（在我的代码中）无法很好地通信.selected类没有手动添加display：none到我的ID容器div。

我想手动删除 .selected 类的原因是因为我可能想要更改应用加载时打开的默认ID容器。

是否有人愿意就如何处理此问题的某些不同想法发表新的看法？

My Editable code on CSSDeck＆lt;基本上就像jsfiddle或jsbin。

的Javascript 

    $('.code-container').css('height', $(window).innerHeight() - 39 + "px");
$(window).resize(function () {
    $('.code-container').css('height', $(window).innerHeight() - 39 + "px");
});


$("[id$=button]").click(function () {

    $(this).toggleClass('selected');

    // creates the name of a viewport ID. "view-" + html of button
    var viewID = "#" + $(this).html() + "-container";
    $(viewID).toggle();

    var viewSize = $(window).innerWidth()/$('.selected').length;
    $(".code-container").css("width", viewSize);
}
);

$('#run').click( function() {
    var html = $('#htmlCode').val();
    var css = $('#cssCode').val();
    var js = $('#jsCode').val();
    $('#iframe').contents().find("html").html("<style>" + css + "</style>" + html);
});

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Code Player</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="style.css" />

</head>

<body>

    <div id="wrapper">

        <div id="header">
            <p id="logo">CodePlayer</p>
            <nav>
                <ul>
                    <li id="html-button"    class="toggle selected no-highlight">html</li>
                    <li id="css-button"     class="toggle selected no-highlight">css</li>
                    <li id="js-button"      class="toggle selected no-highlight">js</li>
                    <li id="result-button"  class="toggle selected no-highlight">result</li>
                </ul>
            </nav>
            <div id="run" class="no-select">Run</div>
        </div>

        <div id="html-container" class="code-container">
            <div class="code-label">HTML</div>
            <textarea id="htmlCode"></textarea>
        </div>
        <div id="css-container" class="code-container">
            <div class="code-label">CSS</div>
            <textarea id="cssCode"></textarea>
        </div>
        <div id="js-container" class="code-container">
            <div class="code-label">JS</div>
            <textarea id="jsCode"></textarea>
        </div>
        <div id="result-container" class="code-container">
            <div class="code-label">Result</div>
            <iframe id="iframe"></iframe>
        </div>



    </div>

    <script type="text/javascript" src="script.js"></script>
</body>

</html>

CSS 

/* Global Settings */
* { padding: 0; margin: 0;}
body {
    font-size: 14px;
    font-family: sans-serif;
}
.no-highlight {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Header Logo Toggles and Buttons */
#header {
    width: 100%; height: 28px;
    background-color: #222;
    padding: 4px;
}
#header #logo {
    color: #fff;
    font-weight: 500;
    position: absolute;
    left: 10px; top: 4px;
    font-size: 1.5em;
    line-height: 28px

}
#header nav {   
    width: 226px; height: 28px;
    margin: auto;
}

/* Look and Feel of buttons */
#header li, #run {
    width: 50px; height: 26px;
    background-color: #000;
    color: #aaa;
    border: 1px solid #00a2ff;
    border-radius: 6px;
    font-size: .8em;
    text-transform: uppercase;
    line-height: 26px;
    text-align: center;
    list-style: none;
    float: left;
    cursor: pointer;
}
/* ads margin ONLY between li elements */
#header li+li {
    margin-left: 6px;
}
/* Run button positioning */
#run {
    position: absolute;
    right: 10px; top: 4px;
}
/* special class to differentiate toggled buttons */
#header .selected, #header #run {
    background-color: #000;
    color: #fff;
}

/* end of Button styling */






/* code-container is the html, css, js and result viewports */
.code-container {
    width: 25%;
    float: left;
    position: relative;
    display: none;
}
/* textarea for user input of code */
.code-container textarea {
    width: 100%; height: 100%;
    padding: 18px 3px 3px 3px;
    font-size: 1.2em;
    border-right: 1px solid #222;
    font-family: monospace;
    box-sizing: border-box;
}
/* viewport name */
.code-label {
    position: absolute;
    top: 5px; right: 5px;
}
/* viewport for the code output result */
iframe {
    width: 100%; height: 100%;
    border: none;
}

1 个答案:

答案 0 :(得分：1)

你的方法很好。然而，在你的实现中有一些可以改进的点。

以下是我的建议：

  1. 不要依赖按钮的innerHtml来识别它们。我介绍了一个新的data-pane属性。您也可以使用id（如果您删除"-button"子字符串）
  2. 使用命名函数并构建代码
  3. 默认情况下，在CSS中隐藏所有.container个元素，并在启动应用程序时显示所有带有"selected"按钮的窗格

    4. Here is a DEMO

    更改

    <强> HTML

    为了演示目的，我删除了第一项的selected类。我还添加了data-pane属性：

    <li id="html-button"    class="toggle no-highlight" data-pane="html">html</li>
<li id="css-button"     class="toggle selected no-highlight" data-pane="css">css</li>
<li id="js-button"      class="toggle selected no-highlight" data-pane="js">js</li>
<li id="result-button"  class="toggle selected no-highlight" data-pane="result">result</li>

    <强> CSS

    我添加了display: none; 

    .code-container {
    width: 25%;
    float: left;
    position: relative;
    display: none;
}

    <强> JS

    我重写了它的主要部分，但这里只是新的部分。

    这会显示应用启动时选择的所有窗格：

      $('.selected').each(function() {
    var pane = $(this).data('pane');
    showPane(pane);
  });

    这为您提供了决定切换内容所需的信息：

      var pane = $(this).data('pane');
  var isSelected = $(this).hasClass('selected');

  if(isSelected) {  
    hidePane(pane);
  } else {
    showPane(pane);
  }

    这些是新的展示和隐藏功能。他们捆绑了更新视图所需的所有操作：

    function showPane(pane) {
  $('#' + pane + '-button').addClass('selected');
  $('#' + pane + '-container').show();
  updateContainers();
}

function hidePane(pane) {
  $('#' + pane + '-button').removeClass('selected');
  $('#' + pane + '-container').hide();
  updateContainers();
}

function updateContainers() {
  var viewSize = $(window).innerWidth() / $('.selected').length;
  $(".code-container").css("width", viewSize);
}

    如您所见，不需要手动display: none;。

相关问题
最新问题