时间戳

首页 > 解决方案 > 用于传递变量的脏 HTML 或脏 jQuery？

javascript - 用于传递变量的脏 HTML 或脏 jQuery？

问题描述

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

干净的 HTML，肮脏的 jQuery：

<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');
});

优点：干净，没有多余的 HTML，

缺点：不是很干净的 jQuery，如果 DOM 结构发生变化，很难检测到错误，并且必须在 2 个地方进行修复

干净的 jQuery，肮脏的 HTML：

<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');
});

优点：干净的 jQuery，即使 DOM 结构改变也能工作

缺点：不太干净，多余的 HTML，

您更喜欢使用哪一个？

标签： javascriptjqueryhtml

解决方案

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

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

$('.rename, .delete').click(function() {
  var id = $(this).closest('.itemContainer').data('id');
  console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="itemContainer" data-id="1"> Item information
  <input type="button" class="rename" value="Rename" />
  <input type="button" class="delete" value="Delete" />
</div>
<div class="itemContainer" data-id="99"> Item information
  <p>
    Extra information...
    <div class="another-child">
      <input type="button" class="rename" value="Rename" />
      <input type="button" class="delete" value="Delete" />
    </div>
  </p>
</div>

推荐阅读