用输入元素替换 span 元素

Question

Problem问题

Once the input is entered in the input field, and the check button is clicked, the input element gets converted into a span element and the check icon gets converted into an edit icon.在input字段中输入输入并单击检查按钮后， input元素将转换为span元素，并且检查图标将转换为编辑图标。

I want that when someone clicks on the edit icon, the span element gets converted into the input element again.我希望当有人点击编辑图标时， span元素再次转换为input元素。

 const container = document.querySelector(".container"); // Creating a SPAN element and appending it to div container.addEventListener("click", (e) => { const tgt = e.target.closest(".icons"); if (tgt) { if (tgt.classList.contains("swapped")) return; // stop if (tgt.classList.contains("check-icon")) { tgt.classList.add("swapped"); let texts = document.querySelectorAll(".text"); let items = document.querySelectorAll(".items"); texts.forEach((text, i) => { let span = document.createElement("span"); let val = document.createTextNode(text.value? text.value: ""); span.appendChild(val); span.classList.add("text2"); items[i].appendChild(span); if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button text.parentNode.replaceChild(span, text); let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit if (tgt.classList.contains("check-icon")) { Array.from(btns).forEach((ele) => { ele.classList.toggle("hidden"); }); } }); } } });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <body style="background-color: #007bff"> <div class="mainContainer"> <h1 class="heading">Details Collector</h1> <div class="container"> <div class="items"> <label class="label" for="Name">Name:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> </div> <div class="items"> <label class="label" for="State">State:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> </div> <div class="items"> <label class="label" for="Country">Country:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> </div> <div class="check-icon icons mainicon"> <i class="fa fa-check " aria-hidden="true"></i> </div> <div class="edit-icon icons hidden mainicon"> <i class="far fa-edit " aria-hidden="true"></i> </div> <div class="plus-icon icons "> <i class="fa fa-plus" aria-hidden="true"></i> </div> </div> </div> </div> <script src="app.js"></script> </body>

Js Fiddle Js小提琴

Answer 1

Created a span element next to inputs, hidden by default.在输入旁边创建了一个 span 元素，默认隐藏。
Created 2 different click events for edit and check buttons.为编辑和检查按钮创建了 2 个不同的点击事件。
On click one element type is made hidden and the other looses its hidden class.单击时，一种元素类型被隐藏，另一种元素类型失去隐藏的 class。

Did not work on styling so you may want to do that yourself.没有在造型上工作，所以你可能想自己做。
Also it's better to change .span class to something appropriate.此外，最好将.span class 更改为适当的值。

Khalil's suggestion about making inputs disabled sound good, too. Khalil 关于disabled输入的建议听起来也不错。

 const container = document.querySelector(".container"); const editIcon = document.querySelector(".edit-icon"); const checkIcon = document.querySelector(".check-icon"); const inputs = [...container.querySelectorAll('.text')] const spans = [...container.querySelectorAll('.span')] editIcon.addEventListener('click', () => { spans.forEach((el, i) => { el.classList.add('hidden'); inputs[i].classList.remove('hidden'); }) editIcon.classList.add('hidden'); checkIcon.classList.remove('hidden'); }) checkIcon.addEventListener('click', () => { inputs.forEach((el, i) => { spans[i].textContent = el.value; el.classList.add('hidden'); spans[i].classList.remove('hidden'); }) checkIcon.classList.add('hidden'); editIcon.classList.remove('hidden'); })

 .mainContainer { height: 400px; width: 900px; background-color: white; margin: 200px auto; border: 5px solid black; border-radius: 8px; }.heading { font-family: "Roboto", sans-serif; font-weight: bold; text-align: center; position: relative; top: 15px; }.container { width: 800px; height: auto; border: 2px solid black; display: grid; grid-template-columns: 230px 230px 230px 50px 50px 50px; align-items: center; margin: auto; position: relative; top: 30px; padding: 10px; background-color: #007bff; }.items { display: flex; align-items: center; justify-content: center; font-family: "Roboto", sans-serif; font-weight: bold; color: #fff; }.text { width: 130px; }.icons { font-size: 18px; border: 2px solid #fff; margin-left: 12px; color: #007bff; cursor: pointer; background-color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; }.icons:hover { color: #fff; background-color: #007bff; }.hidden { display: none; }

 <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body style="background-color: #007bff"> <div class="mainContainer"> <h1 class="heading">Details Collector</h1> <div class="container"> <div class="items"> <label class="label" for="Name">Name:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> <span class="span hidden"></span> </div> <div class="items"> <label class="label" for="State">State:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> <span class="span hidden"></span> </div> <div class="items"> <label class="label" for="Country">Country:</label> &nbsp;&nbsp;&nbsp; <input class="text" type="text" /> <span class="span hidden"></span> </div> <div class="check-icon icons mainicon"> <i class="fa fa-check " aria-hidden="true"></i> </div> <div class="edit-icon icons hidden mainicon"> <i class="far fa-edit " aria-hidden="true"></i> </div> <div class="plus-icon icons "> <i class="fa fa-plus" aria-hidden="true"></i> </div> </div> </div> </body> </html>

Answer 2

In your js file.在你的 js 文件中。

Modify the check-icon help block a bit, add the following code in the loop of btns.稍微修改check-icon帮助块，在btns的循环中添加如下代码。

if (ele.classList.contains("check-icon")) {
    ele.classList.remove("swapped");
}

Adding this additional if block will help.添加这个额外的 if 块会有所帮助。

    if (tgt.classList.contains("edit-icon")) {

      let texts = document.querySelectorAll(".text2");
      let items = document.querySelectorAll(".items");
      texts.forEach((text, i) => {
        let input = document.createElement("input");
        input.value = text.textContent;
        input.classList.add("text");
        items[i].appendChild(input);
        text.parentNode.replaceChild(input, text);

        let btns = document.querySelectorAll(".mainicon"); // changing icon from check to edit
        Array.from(btns).forEach((ele) => {
          ele.classList.toggle("hidden");
if (ele.classList.contains("check-icon")) {
            ele.classList.remove("swapped");
            }

        });

      });

    }

jsFiddel link jsFiddel 链接

用输入元素替换 span 元素

问题描述

2 个解决方案

解决方案1
0 2022-01-08 18:03:18

解决方案2
0 2022-01-08 18:56:23

用输入元素替换 span 元素

问题描述

2 个解决方案

解决方案1 0 2022-01-08 18:03:18

解决方案2 0 2022-01-08 18:56:23

解决方案1
0 2022-01-08 18:03:18

解决方案2
0 2022-01-08 18:56:23