javascript - 在所选部分之上或之外添加部分-6ren

javascript - 在所选部分之上或之外添加部分

转载作者：行者123 更新时间：2023-11-30 13:46:04

我想让用户能够在他选择的任何地方添加部分。在所选部分下方或上方，例如:

  <add section button>
0. here section 0
   <add section button>

如果用户点击 <add section button>在编号为 0 的部分下面应该是:

  <add section button>
0. here section 0
   <add section button>
1. here section 1
   <add section button>

如果用户再次点击 <add section button>在编号为 0 的部分下面应该是:

  <add section button>
0. here section 0
   <add section button>
2. here section 2
   <add section button>
1. here section 1
   <add section button>

如果用户再次点击<add section button>在编号为 0 的部分下面应该是:

  <add section button>
0. here section 0
   <add section button>
3. here section 3
   <add section button>
2. here section 2
   <add section button>
1. here section 1
   <add section button>

但是对于这个场景我得到:

场景 2:

如果用户单击第 0 部分上方的按钮一次，然后单击第 1 部分上方的按钮，应该如下所示:

  <add section button>
2. here section 2
   <add section button>
1. here section 1
   <add section button>
0. here section 0
   <add section button>

但它看起来像:

这里是我的完整代码:

<head>
  <style>
    .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;
    }
  </style>
</head>

<body>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
  <script>
    function getListItem(dir) {
      if (dir == 'up')
        return `
      <li>
        <button type="button" class="collapsible">Section ` + (++countElem) + `</button>
        <div class="content">
          <button>upload file</button>
        </div>
      </li>
      <li class="btn-down">
        <button onclick="addSection('down',this)">Add Section </button>
      </li>`;
      else
        return `<li class="btn-up">
        <button onclick="addSection('up',this)">Add Section </button>
      </li>
      <li>
        <button type="button" class="collapsible">Section ` + (++countElem) + `</button>
        <div class="content">
          <button>upload file</button>
        </div>
      </li>`;
    }


    var countElem = 0;

    function addSection(dir, el) {
      var sibling;
      //  if (dir == 'up')
      sibling = el.parentElement;
      // else
      //   sibling = el.nextElementSibling;

      while (sibling) {
        if (dir == 'down' && sibling.matches('.btn-down')) {
          // var node = document.createElement("li"); // Create a <li> node
          // var textnode = document.createTextNode("New li Item was added Up!"); // Create a text node
          // node.appendChild(textnode);
          // return sibling.parentNode.insertBefore(node, node.nextSibling);
          $(el.parentNode).prepend(getListItem('down'));
          break;
        } else if (dir == 'up' && sibling.matches('.btn-up')) {
          // var node = document.createElement(getListItem()); // Create a <li> node
          // var textnode = document.createTextNode("test"); // Create a text node
          // var textnode = document.createht
          // node.appendChild(textnode);
          // return sibling.parentNode.insertBefore(node, sibling);
          $(el.parentNode).append(getListItem('up'));
          break;
        }
        // if (dir == 'up')
        sibling = sibling.previousElementSibling
        // else
        //   sibling = sibling.nextElementSibling;
      }
      // handleEvents();
    }


   
  </script>
  <div id="header">
    <ul class="tabs">
      <li class="btn-up">
        <button onclick="addSection('up',this)">Add Section </button>
      </li>
      <li>
        <button type="button" class="collapsible">Section 0</button>
        <div class="content">
          <button>upload file</button>
        </div>
      </li>
      <li class="btn-down">
        <button onclick="addSection('down',this)">Add Section </button>
      </li>
    </ul>
  </div>
</body>

最佳答案

虽然您的代码似乎工作正常，但您要求的是一种方法来完成似乎不可能通过每个部分的单个按钮实现的事情。向每个部分添加第二个按钮，以便一个部分具有向上和向下按钮，可以轻松解决问题。

我努力创建了一个带有一些额外 CSS 的“简化”版本，以表明在添加第二个按钮时它不必不那么漂亮。您可以通过样式来使按钮对您和用户更具吸引力。

查看下面的示例。

let sectionIndex = 0;

function addSection(position, relation) {
  const template = `
    <li class="section">
      <button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">&#8593;</button>
      <button aria-label="Add section below" class="section__button section__button--down" value="afterend">&#8595;</button>
      <span class="section__label">Section ${++sectionIndex}</span>
    </li>`;
  relation.insertAdjacentHTML(position, template);
}

const sections = document.querySelector('.js-sections');
sections.addEventListener('click', function(event) {
  const button = event.target.closest('.section__button');
  if (button !== null) {
    const position = button.value;
    const relation = button.parentElement;
    addSection(position, relation);
  }
  event.preventDefault();
});

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section {
  display: grid;
  grid-template-rows: 3em 3em;
  grid-template-columns: 3em 1fr;
  grid-template-areas: 
    "up label"
    "down label";
  background-color: #f7f7f7;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  margin: 0.5em 0;
  overflow: hidden;
}

.section__button {
  appearance: none;
  background-color: #d8d8d8;
  font-size: 1em;
  border: 0;
  padding: 1em;
  margin: 0;
  color: white;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 250ms ease-in-out, background-color 250ms ease-in-out;;
}

.section__button:focus {
  outline: 0;
}

.section:hover .section__button {
  opacity: 1;
}

.section__button--up {
  grid-area: up;
}

.section:hover .section__button--up {
  background-color: #215467;
}

.section__button--down {
  grid-area: down;
}

.section:hover .section__button--down {
  background-color: #e2a418;
}

.section:hover .section__button:hover {
  background-color: #55c773;
}

.section__label {
  grid-area: label;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 5em 2em 2em;
}

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

<ul class="js-sections">

  <li class="section">
    <button aria-label="Add section above" class="section__button section__button--up" value="beforebegin">&#8593;</button>
    <button aria-label="Add section below" class="section__button section__button--down" value="afterend">&#8595;</button>
    <span class="section__label">Section 0</span>
  </li>
  
</ul>

关于javascript - 在所选部分之上或之外添加部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59313663/

文章推荐： c# - 将年份字符串(即 '2005')转换为日期时间值

文章推荐： javascript - 没有效果的 CSS 属性，由 js getComputedStyle() 读取

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 在所选部分之上或之外添加部分