听jQuery上的DOM事件，试试jQuery by codeschool

Question

我正在通过codeschool学习TryjQuery。这是应用到我的问题的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>

这是jQuery代码 的答案

$(document).ready(function() {
   $("#nights").on("keyup", function() {
     var nights = +$(this).val();
     var dailyPrice = +$(this).closest(".tour").data("daily-price");
     $("#total").text(nights * dailyPrice);
     $("#nights-count").text($(this).val());
    });
});

我只是想知道我是否可以使用var nights = +$("#nights-count").text($(this).val());而不是使用这个

var nights = +$(this).val();    
$("#nights-count").text($(this).val());

我很好奇2 $(this).val();之间的关系。它们在某种程度上是重复的吗?哪种是有效的编码方式?

我感谢你的时间和帮助。

欢呼,

Answer 1

这是一些奇怪的jQuery，有一些不必要的代码，以及一些不好的实践。

首先，+在$(this).val()之前。这是一元加号运算符，它将$(this).val()转换为一个数字，以便在数学运算中使用它。这不是必需的本身，因为它只在乘法中使用，无论如何它都会被转换，但我认为这不是一个坏的主意。(使用+操作符的另一行也是如此)

然而，

$(this).val()， 是坏代码。this.value做了完全相同的事情，而且性能要好得多。

关于你的具体问题:

var nights = +$("#nights-count").text($(this).val());

不，你不能那样做。这将值放在#nights-count中，但text返回一个jQuery对象。因此，您正在尝试将jQuery对象转换为数字。这总是会得到NaN (not-a-number)。

如果我要写这段代码，我会这样做:

$(document).ready(function() {
   $("#nights").on("keyup", function() {
     var nights = +this.value;
     var dailyPrice = +$(this).closest(".tour").data("daily-price");
     $("#total").text(nights * dailyPrice);
     $("#nights-count").text(nights);
    });
});

这意味着我们没有做任何不必要的函数调用。