Question

这是我的HTML：

<div class="tour" data-daily-price="357">
  <h2>Paris, France Tour</h2>
  <p>$<span id="total">2,499</span> for <span id="nights-count">7</span> Nights</p>
  <p>
    <label for="nights">Number of Nights</label>
  </p>
  <p>
    <input type="number" id="nights" value="7">
  </p>
</div>

这是我用于更改span元素测试的错误代码，以读取我在数字输入中输入的内容。

$(document).ready(function() {
  $("#nights").on("keyup", function() {
    $("#nights-count").text($("#nights").val());
  });
});

这是正确的代码：

$(document).ready(function() {
  $("#nights").on("keyup", function() {
    $("#nights-count").text($(this).val());
  });
});

为什么我需要使用self而非#nights才能使用？

Answer 1

如果您的文档中有多个名称为#nights的ID，则默认选择第一个ID为#nights的ID。其中this将指示当前选定的DOM元素而不是#nights id。如果您使用this它指示当前所选的DOM元素，那就是为什么在您的情况下获得正确的输出的原因是#nights有多个ID。

Answer 2

除非#nights不是唯一ID，否则应该可以正常工作。例如，如果有多个"tour" div，每个div都有一个#nights元素。也就是说，$(this)更好，因为它不需要jQuery去再次解析DOM ......

Answer 3

问题是您有多个ID为nights的元素。您的第一个代码块有效：http://jsfiddle.net/fomd990c/

如果您有另一个ID为nights的元素，则不会：http://jsfiddle.net/fomd990c/1/

将特定ID限制为仅一个元素通常是个好主意。

使用jquery和javascript以及“this”的使用来遍历dom的正确方法

3 个答案: