Question

我可能会错过这里房间里的大象，但我无法弄清楚。

我想做的是，每次单击按钮时，将Y数量添加到变量X中。 Y通过onClick函数传递。

addStat: function(button, amount, price) {
    var curPrice = price;
    var priceHtml = $(button).closest("tr").find('.price');

    curPrice += price;

    $(priceHtml).text(curPrice);

},

这就是我所拥有的，但是我感觉需要在功能之外设置当前价格的值？我尝试过，但是每次按下按钮时它总是会重置。

欢迎提出任何想法/建议。我对JS有点陌生。只是学习。

如果我获得price HTML元素的值，我知道一种方法会起作用。但是问题在于，可以使用chrome inspect对其进行编辑。

Answer 1

您只需要使用priceHtml.text()获取当前价格值并将其分配给您的curPrice变量即可。

尝试一下：

var priceHtml = $(button).closest("tr").find('.price');
var curPrice = parseFloat(priceHtml.text())||0;

curPrice += price;

priceHtml.text(curPrice);

Answer 2

您必须在函数之外的代码上方设置let curPrice = 0;。然后，您可以简单地在函数内部使用curPrice += parseFloat(price);。这样可以防止curPrice的错误覆盖值。

编辑->示例：

let curPrice = 0;

function updatePrice(button, amount, price) {
    if(!isNaN(price)) {
      curPrice += price;
      return $(button).find('.price').text(curPrice.toFixed(2));
    }
    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="updatePrice(this, 10.00, 10.00)">
  <span class="price">0.00</span>
</button>

<button onclick="updatePrice(this, 10.00, 'isNaN')">
  <span class="price">Not working!</span>
</button>

并使用let variable;代替var variable;

另一个例子：

function updatePrice(button, amount, price) {
  //Find the .price inside the clicked button
  let $price = $(button).find('.price');
  //Test if price is numeric
  if(!isNaN(price)) {
    //If is numeric retrive the current price and add the price
    let newPrice = parseFloat($price.text()) + parseFloat(price);
    //Return the new price and print it on .price inside the button
    return $price.text(newPrice.toFixed(2)); // .toFixed(2) return 2 decimal.
  }
  //If price is not numeric return false
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- price is numeric so it works -->
<button onclick="updatePrice(this, 10.00, 10.00)">
  <span class="price">10.00</span>
</button>
<!-- price is not numeric so the function return false -->
<button onclick="updatePrice(this, 10.00, 'not numeric')">
  <span class="price">10.00 (not working)</span>
</button>

祝你好运！

Answer 3

我试图将您要做的只是一个最小的例子。从您的问题看来，您似乎想在一次点击中做四件事：

获取元素的文本值
将该值强制为数字
将数字加倍
将新值写入元素

您不必将curPrice var移到函数之外。您不必在每次点击时都重新声明它，因为您会立即针对自己将其加倍。并且您将需要使用parseInt将传入的文本解析为一个数字，否则javascript将假定您正在尝试进行字符串连接：

function addStat(event) {
    var curPrice = parseInt(event.target.textContent, 10);

    curPrice += curPrice;

    $(event.target).text(curPrice);
}

$('.price').click(addStat)

.price {
  background-color: #ace;
  height: 25px;
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="price">1</div>
<div class="price">3</div>

每次单击按钮时，将值Y添加到值X

3 个答案: