Javascript 传递变量的脏HTML或脏jQuery？

我必须将变量传递给jQuery。在我看来，有两种不同的方法：

干净的HTML，脏的jQuery：

优点： 干净，不是多余的HTML

缺点： 不那么干净的jQuery， 如果DOM结构发生更改，则很难检测到错误，并且必须将其固定在两个位置

干净的jQuery，脏的HTML：

优点： 清理jQuery， 即使DOM结构发生变化也能正常工作

缺点： 不那么干净，多余的HTML

---

您希望使用哪一个？

将要添加侦听器的选择器放在用于添加侦听器的选择器字符串中。单击“侦听器”以逗号分隔，您根本不需要重复：

$'。重命名、.delete'。单击函数{ var id=$this.parent.attr'data-id'； console.logid； }; 项目信息 项目信息 可以使用多个选择器组合两个图元的单击事件。您可以指定任意数量的选择器组合成一个结果。这种多表达式组合器是选择不同元素的有效方法

干净的jQuery，干净的HTML： $'。重命名、.delete'。单击函数{ var id=$this.parent.attr'data-id'； console.logid； }; 项目信息

---

您的第一个HTML结构是更好的实现，因为它避免了重复相同的数据id属性

对于jQuery，您可以通过用逗号分隔选择器来使用单个事件处理程序，并且可以使用“最近”来查找所需的父元素。这更为健壮，因为您可以根据需要更改父节点中的HTML结构，并且只要单击的元素仍然是子节点，它就不会破坏JS逻辑。最后，请注意，您应该尽可能使用数据来获取/设置数据属性，而不是attr。试试这个：

$'。重命名、.delete'。单击函数{ var id=$this.nexist'.itemContainer'.data'id'； console.logid； }; 项目信息 项目信息 额外信息。。。

我将使用和一个数据属性。您不需要jQuery。添加了一个用于重新构造DOM的按钮，以演示处理程序在它之后继续工作

=> { 常数evtHandler=evt=>{ 常量原点=evt.target； 控制台。清除； 如果origin.id==redoDOM{return restructure；} 如果origin.parentNode.classList.ContainesSitemContainer{ console.log`${origin.classList}数据id:${origin.parentNode.dataset.id}`； } }; document.addEventListenerclick，evtHandler； 功能重组{ if！document.queryselectorbttcontainer{ 让容器=document.createElementdiv； container.id=BttnContainer； container.innerHTML=` 已包装div.itemContainer元素。 检查按钮处理程序是否仍然有效

`； Array.fromdocument.querySelectorAll.itemContainer .forEachv=>container.appendChildv； document.body.insertbefore容器，document.body.firstChild； }否则{ console.log已包装； } } }; BTTN集装箱{ 颜色：绿色； } 单击按钮以显示周围图元的数据id值

项目信息1 改名 删去 项目信息2 改名 删去 单击以在新元素中包裹按钮 重组

---

肯定是第一个HTML结构，但使用$this.nestest'.itemContainer'并在适当的情况下在两个处理程序之间共享代码。如果HTML结构不固定，则最好使用第二个代码，正确的数据更重要，您可以使用代码redundancy@ACT可能地但在这种情况下，两者都是很容易做到的。不幸的是，这并没有涵盖DOM更改的操作要点，这要看情况而定。@Rorymcrossan。OP不清楚DOM到底会/可能发生什么变化。如果更改涉及.itemContainer的数据属性被剥夺，或者按钮被移到容器外部，则此操作将不起作用。@Rorymcrossan为了配合我的上一条语句，我在代码段中添加了一些代码

<div class="itemContainer" data-id="1">
  Item information
  <input type="button" class="rename">
  <input type="button" class="delete">
</div>

$('.rename').click(function() {
    var id = $(this).parent().attr('data-id');
});
$('.delete').click(function() {
    var id = $(this).parent().attr('data-id');
});

<div class="itemContainer">
  Item information
  <input type="button" class="rename" data-id="1">
  <input type="button" class="delete" data-id="1">
</div>

$('.rename').click(function() {
    var id = $(this).attr('data-id');
});
$('.delete').click(function() {
    var id = $(this).attr('data-id');
});