Question

我必须将变量传递给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

您想使用哪一个？

Answer 1

您的第一个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>

Answer 2

将要添加侦听器的选择器放在用于向其添加"@angular/core": "2.4.10", "@types/jasmine": "^2.8.8", "@types/jasmine-jquery": "^1.5.32", "jasmine": "^2.99.0", "jasmine-jquery": "^2.1.1", "karma": "^1.7.1", "karma-firefox-launcher": "^1.1.0", "karma-jasmine": "^1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "karma-jasmine-jquery": "^0.1.1"侦听器的选择器字符串中（<逗号>在一起）（用逗号分隔），而不必重复一遍：

.click

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

Answer 3

您可以使用click为两个元素组合Multiple Selector事件。您可以指定任意数量的选择器以组合成一个结果。这种多表达式组合器是选择不同元素的有效方法。

干净的jQuery，干净的HTML：

$('.rename, .delete').click(function() {
    var id = $(this).parent().attr('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">
  <input type="button" class="delete">
</div>

Answer 4

我将使用event delegation和一个数据属性。您不需要jQuery。添加了一个用于重组DOM的按钮，以演示该处理程序在处理DOM之后仍可正常工作。

(() => {
  const evtHandler = evt => {
    const origin = evt.target;
    console.clear();
    if (origin.id === "redoDOM") { return restructure(); }
    if (origin.parentNode.classList.contains("itemContainer")) {
       console.log(`${origin.classList} data-id: ${origin.parentNode.dataset.id}`);
    }
  };
  document.addEventListener("click", evtHandler);
    
  function restructure() {
    if (!document.querySelector("#BttnContainer")) {
      let container = document.createElement("div");
      container.id = "BttnContainer";
      container.innerHTML = `
        <p>
          div.itemContainer elements are wrapped. 
          Check if the button handler still works
        </p>`;
      Array.from(document.querySelectorAll(".itemContainer"))
       .forEach(v => container.appendChild(v));
      document.body.insertBefore(container, document.body.firstChild);
    } else {
      console.log("Already wrapped");
    }
  }
})();

#BttnContainer {
  color: green;
}

<p>Click buttons to show data-id value of the surrounding element</p>

<div class="itemContainer" data-id="1">
  Item information (1)
  <button class="rename">rename</button>
  <button class="delete">delete</button>
</div>

<div class="itemContainer" data-id="2">
  Item information (2)
  <button class="rename">rename</button>
  <button class="delete">delete</button>
</div>

<p>
  Click to wrap buttons in a new element
  <button id="redoDOM">Restructure</button>
</p>

传递变量的HTML脏还是jQuery脏？

4 个答案: