独特的js功能的倍数按钮

Question

我的想法是为列表中的每张卡片制作一个“编辑”按钮，将阅读区域转换为文本区域。

在这个想法中，没有什么复杂的，因为我是在个人资料页面上完成的。 但在这个例子中，我只有一个按钮，我的区域已经定义

今天我有几行都有一个“编辑”按钮。 由于没有将生成的按钮数量，我无法为每个按钮创建一个功能。

你有想法吗 ？

关于我的代码，这是一个卡片示例

在我的个人资料页面上，我将“输入文本”放在 display none 中，并将我的 span 放在 display inherit 中（我认为在这里也可以这样做）

<div class="card-body ">
 <div class="row">
  <div class="col">
   <button>Click to update </button>
  </div>
 </div>
 <div class="row">
  <div class="col">
   <span style="display:inherit">read area</span>
   <input type="text" style="display:none">write area</input>
  </div>
  <div class="col">
   <span style="display:inherit">read area 2</span>
   <input type="text" style="display:none">write area 2</input>
  </div>
 </div>
</div>

Answer 1

你能简单地根据触发的事件来定位 HTML 元素吗？ 然后您可以使用 HTML 节点的父节点、兄弟节点等来进行操作。

Answer 2

是的，您可以添加一个函数作为多个 html 元素的事件侦听器。 关键是获取触发事件的元素，以便它成为函数根据单击的确切按钮工作的参数。

这使得在您的事件处理程序中具有参数event并访问event.target以检索触发事件的对象。

这是一个演示该概念的演示。 有一组行，每行都有一个编辑按钮。 编辑按钮在开始时被初始化，以便为每个按钮添加一个指向单个函数editClickHandler的事件侦听器

 //when document is ready document.addEventListener('DOMContentLoaded', ()=>{ //initialize buttons initEditButtons(); }); function initEditButtons(){ //retrieves all the button contained in .container .row collection editButtons = document.querySelectorAll('.container > .row > button.edit'); //for each one of them editButtons.forEach((editButton, i)=>{ //adds a click event handler editButton.addEventListener('click', editClickHandler); }); } function editClickHandler(event){ //find the currently selected row document.querySelector('.container > .row.rowSelected') //remove its selected class ?.classList.remove('rowSelected'); //clicked edit button const clickedButton = event.target; //row corresponding to the clicked button const selectedRow = clickedButton.closest('div.row'); //adds the class rowSelected to the clicked row selectedRow.classList.add('rowSelected'); }

 *{ box-sizing: border-box; } .container{ width: fit-content; } .row{ margin-bottom: 2px; padding: 3px 6px; } .rowSelected{ border: dashed 2px gray; } button.edit{ cursor: pointer; }

 <div class="container"> <div class="row"> <span>01</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>02</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>03</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> <div class="row"> <span>04</span> <span>Field1</span> <span>Field2</span> <button class="edit">Edit</button> </div> </div>