javascript - 在特定位置添加

Question

我正在尝试实现以下目标:我想让用户能够在上方或下方添加部分，每个部分都可以扩展，并且在每个部分内用户都可以在上方或下方添加文件。如图:

例如，如果用户想在上面添加部分，它将如下所示:

现在我的代码总是把这个部分添加到最后，这里是我的代码:

function addSection() {
  $("#header ul").append(
    '<li ><button onclick="addSection()">Add Section</button></li><li><button type="button" class="collapsible">Open Section 1</button><div class="content"><button>upload file</button></div></li></li><li><button  onclick="addSection()">Add Section</button></li>'
  );
  handleEvents();
}


function handleEvents() {
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].removeEventListener("click", function() {});
  }

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display !== "none") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

.collapsible {
  background-color: #777;
  color: white;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  cursor: pointer;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #90ee90;
}

body {
  font-size: 15px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

<div id="header">
  <ul class="tabs">
    <li>
      <button onclick="addSection()">Add Section</button>
    </li>
    <li>
      <button type="button" class="collapsible">Open Section 1</button>
      <div class="content">
        <button>upload file</button>
      </div>
    </li>
    <li>
      <button onclick="addSection()">Add Section</button>
    </li>
  </ul>
</div>

Answer 1

在我们可以用当前代码做到这一点之前，我们首先需要改进的地方很少。

• 您需要以某种方式知道您按下的是什么类型的 addSection 按钮以及其意图是什么。是要在上方创建部分的按钮还是要在下方创建部分的按钮。关于如何传达这一点，您可以执行以下操作。

  • 您可以决定向按钮添加数据属性，然后在点击事件发生时读取该数据属性
  • 您可以决定将参数传递给您的函数 addSection，它将告诉您点击的意图

• 您可以使用 jQuery 实用程序将 append 或 prepend 到同级部分。要查找兄弟部分，您可以使用 jQuery .closest。使用此实用程序，您可以发现离您的点击最近的兄弟。

考虑到这一点，我们可以构建以下代码:

function addSection(dir) {
    // we are now passing a dir as in direction
    // to know if we should append or prepend

    // lets get the total count of sections 
    var sectionsCount = $('.collapsible').length;

    // create next section
    var item = getListItem(sectionsCount);

    // find what is the closes section where the click originated
    var closestLi = $(this.event.target).closest('li');

    // check the dir
    if(dir === 'up') {
      $(closestLi).prepend(item);
    }
    if(dir === 'down') {
      $(closestLi).append(item);
    }
    handleEvents();
}

如果您想摆弄一下，可以在这里找到完整的工作演示:https://jsfiddle.net/ft1xou2v/2/

function getListItem(sectionsCount) {
  	return '<li ><button onclick="addSection(\'up\')">Add Section ↑</button></li><li><button type="button" class="collapsible">Open Section '+ sectionsCount +'</button><div class="content"><button>upload file</button></div></li></li><li><button onclick="addSection(\'down\')">Add Section ↓</button></li>';
  }
	function addSection(dir) {
  var sectionsCount = $('.collapsible').length;
  var item = getListItem(sectionsCount);
  var closestLi = $(this.event.target).closest('li');
	if(dir === 'up') {
    $(closestLi).prepend(item);
  }
  if(dir === 'down') {
    $(closestLi).append(item);
  }
  handleEvents();
}


function handleEvents() {
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].removeEventListener("click", function() {});
  }

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display !== "none") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

.collapsible {
  background-color: #777;
  color: white;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  cursor: pointer;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #90ee90;
}

body {
  font-size: 15px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<div id="header">
  <ul class="tabs">
    <li>
      <button onclick="addSection('up')">Add Section ↑</button>
    </li>
    <li>
      <button type="button" class="collapsible">Open Section 0</button>
      <div class="content">
        <button>upload file</button>
      </div>
    </li>
    <li>
      <button onclick="addSection('down')">Add Section ↓</button>
    </li>
  </ul>
</div>