Question

我有3个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

您可以尝试这样的方法，而不是for

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

jQuery replacewith（）div被添加而不是被替换

1 个答案: