个人中心
gpt4 book ai didi

javascript - 修改我的代码 : currently using toggle() and toggleClass()

转载 作者：太空宇宙 更新时间：2023-11-04 11:58:59 24 4
gpt4 key购买 nike

我的一些代码没有传达它需要的内容。

关于这些 ID

  • #html 按钮
  • #css 按钮
  • #js 按钮
  • #result-button

我添加了一个名为.selected 的类。我编写代码的方式照原样工作得很好。但是，当我从这些 ID 中删除 selected 时，我将不得不添加新的 CSS 并将“display: none”添加到任何相应的视口(viewport)容器中:

  • #html-容器
  • #css 容器
  • #js 容器
  • #result-container.

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

基于我选择使用 toggle() 和 toggleClass() 的方法不能很好地一起通信(在我的代码中)尝试手动删除时.selected class 而无需手动添加 display: none 到我的 ID 容器 div。

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

有人愿意就如何处理这个问题提出一些不同的想法吗？

My Editable code on CSSDeck < 基本上像 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. 不要依赖按钮的 innerHtml 来识别它们。我引入了一个新的 data-pane 属性。您也可以使用 id(如果您去除 "-button" 子字符串)
  2. 使用命名函数并构建代码
  3. 在您的 CSS 中默认隐藏所有 .container 元素，并在引导您的应用程序时显示所有带有 “selected” 按钮的 Pane

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

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

这显示了应用程序启动时选择的所有 Pane :

  $('.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);
  }

这些是新的显示和隐藏功能。它们捆绑了更新 View 所需的所有操作:

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;。

关于javascript - 修改我的代码 : currently using toggle() and toggleClass()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29988942/

24 4 0
文章推荐： java - perl 和 java 正则表达式功能之间有什么区别？
文章推荐： c++ - boost range adapter 类似于 transformed 可以访问相邻元素
文章推荐： linux - 更改文件 Linux 上的更改时间戳
文章推荐： java - 删除模式规则中的空格
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com