javascript - Jquery Replacewith() div 被添加而不是被替换

Question

我有三个 div，一个显示普通文本，另一个显示所见即所得编辑器内的文本，另一个显示文本列表。

访问页面时会显示普通文本，并且有两个按钮可以用编辑器或列表替换普通文本。

我的问题是，当我单击一个按钮，然后单击另一个按钮时，两个 div 都可见。它们不会相互取代，而是会并列添加。

为什么会这样？我该怎么办？

我的代码:

$("body").on("click", ".editcontenticon", function() {
  console.log('edit');
  var $form = $("#editcontentform");
  var $content = $form.find( "input[name='content']" ).val();
  tinymce.init({
    selector: '#editcontentarea',
    language: 'nl',
    height: '400',
    plugins: "lists advlist textcolor colorpicker link",
    toolbar: 'link insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });

  tinymce.activeEditor.setContent($content);
  $('.editwindow').replaceWith($('.editwindowadmin').show());
});

$("body").on("click", ".versionicon", function() {
  console.log('versions');
  $('.editwindow').replaceWith($('.versions').show());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="versions">
   <h4>Versiebeheer</h4>
   <ul class="versionlist">
      <li><b>Organisatie 123</b> - 2018-08-28 15:07:07 <i class="mdi mdi-delete-forever"></i></li>
      <li><b>Organisatie 123</b> - 2018-08-28 15:00:53 <i class="mdi mdi-delete-forever"></i></li>
   </ul>
</div>
<div class="editcontent">
   <i title="Versiebeheer" class="versionicon mdi mdi-note-text"></i>
   <i title="Edit" id="1" class="editcontenticon mdi mdi-tooltip-edit"></i>
</div>
<div class="editwindowadmin">
   <form class="wysiwyg" id="editcontentform" method="post">
      <input type="text" name="title" class="form-control margininput" value="Organisatie 123">
      <input type="hidden" name="parent_id" value="73">
      <input type="hidden" name="id" value="1">
      <input type="hidden" name="content" value="<p>Test test test 123</p>">
      <textarea id="editcontentarea"><p>Test test test 123</p></textarea>
      <input type="checkbox" id="versioncheck" class="mtop-20" name="version"> Opslaan als nieuwe versie (huidige versie wordt overschreven wanneer niet aangevinkt)<br>
      <button type="button" id="savecontent" class="font-15 btn btn-secondary mtop-20 btn-lg waves-effect btnadd fullwidth">Opslaan</button>
   </form>
</div>
<div class="editwindow">
   <h4 class="mt-0 m-b-30 header-title bigheader">Organisatie 123</h4>
   <p>
   <p>Test test test 123</p>
   </p>
   <p>Versiedatum: 2018-08-28 15:00:53 <i class="mdi mdi-note-text"></i></p>
</div>

Answer 1

您可以尝试这样的方法，而不是 replaceWith()

var $editwindowhidden = $(".editwindowhidden");
var $editwindow = $(".editwindow");
var $versions = $(".versions");
var $admin = $(".admin");

$("body").on("click", ".editcontenticon", function() {
    $editwindowhidden.append($editwindow.children()[0]);
    $editwindow.append($versions);
});

$("body").on("click", ".versionicon", function() {
    $editwindowhidden.append($editwindow.children()[0]);
    $editwindow.append($admin);
});

.group:after {
  content: "";
  display: table;
  clear: both;
}

li {
  border:solid 1px;
  background-color: green;
  padding: 0.5em;
  margin: 0.5em;
  float: left;
  display: inline-block;
}

<div class="editcontent">
    <ul class="group">
        <li class="versionicon" style="">Versiebeheer</li>
        <li class="editcontenticon" style="">Edit</li>
    </ul>
</div>

<div class="editwindow" style="border:solid 1px; padding: 1em;">
    <div class="defaulttext">
        <h4>Edit Window</h4>
        <p>Test test test 123</p>
    </div>
</div>

<div class="editwindowhidden" style="border:solid 1px; padding: 1em; background-color: #999;">
    <h2>To be hiddent off screen....</h2>

    <div class="versions" style="">
        <h4>Versions Div</h4>
        <p>Some version info</p>
    </div>

    <div class="admin" style="">
        <h4>Admin Div</h4>
        <p>Some admin info</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>