Question

我正在与Babylonjs合作开发3D界面，所以我需要画布。围绕那个画布，我想实现html元素（使用Holy grail布局：nav向左，main是画布在中间，在右边），根据2种模式：可视化和版本。

我有一个脚本来处理画布并使用babylonjs函数，另一个用于根据所选模式管理html的构造。

正如您在我的代码中看到的，我将我的html代码分配给变量，并将该变量附加到我的holygrail main。但是，我不希望每次更改模式时都会重新创建画布，所以我直接在HTML中实现它，它是不变的。

我的问题是：我想将元素附加到我的div #insertHere，还要删除此#insert div之前的所有元素（除了我的画布必须保留）然后添加新的元素（否则我会有几个导航和旁白）。

任何人都可以帮助我吗？谢谢你的时间！

这是我的构建脚本：

var content = "";
var construct = true;
var visualize = false;

function Create(){
      content = "";

      if(construct == true && visualize == false){
        content += "<div id='1'> <p> hello</p></div><div><p>Insert a lot of html here</p></div>";
        $("insertHere").append(content);
      }
      if(construct == false && visualize == true){
        content += "<div id='not1'><p> Definitely not the same content as the construct one</p></div>";
        $("insertHere").append(content);
      }
}

$(window).ready(function(){
  Create();
  $("#switchmode").click(function(){
    construct = !construct;
    visualize = !visualize;
  // INSERT THE SOLUTION TO CLEAR THE HTML HERE
    CreationPage();
  });
});

这是我的HTML（两者都是我真正拥有的内容的简短表示）：

<!DOCTYPE html>
<html>    
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>   
<body id="body" class="HolyGrail">
    <header>
        <link rel="stylesheet" type="text/css" href="style.css" media="all">
        <link rel="stylesheet" href=".\bootstrap\css\bootstrap.css">
        <link rel="stylesheet" href="justcontext.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <script style="text/javascript" src="scripts/construction.js" defer></script>
      </header>

    <div id='menuonglets' class='btn-group' role='group' aria-label='Basic example'>
      <button type='button' class='btn btn-secondary' id='switchmode'>Mode Visu/ Mode Constru</button>
    </div>

    <div class='HolyGrail-body' id='insertHere'>
      <main class='HolyGrail-content'>
          <canvas id='renderCanvas'></canvas>
      </main>
      <!-- Things are inserted here -->
    </div>
</body>
</html>

Answer 1

您可以使用jQuery＆＃39; filter()函数删除除画布之外的所有元素。

这是一个有效的例子：

＆＃13;

$("#btn_clear").on("click", function(e){
  e.preventDefault();
  
  $("#insertHere").children().filter(":not(.HolyGrail-content)").remove();
});

＆＃13;

所以：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='HolyGrail-body' id='insertHere'>
   <main class='HolyGrail-content' style="background: orange;">
       <canvas id='renderCanvas'></canvas>
   </main>
   
   <p>I'm a paragraph</p>

   <ul>
      <li>Foo</li>
      <li>bar</li>
   </ul>
</div>

<a href="#" id="btn_clear">Remove all elements but the canvas</a>

与Jquery中的附加完全相反

1 个答案: