无法在按钮单击时使用 javascript 更新全局变量

Question

我需要更新price 全局变量。我相信这可能与范围有关。如果您能在这方面提供帮助，我将不胜感激。

这是脚本：

var price = 0;

var nextdayClass = $('.delivery1');
var $standardClass = $('.delivery2');
var $pickupClass = $('.delivery3');

nextdayClass.on('click', function() {
               var nextday = $('#nextday').data('price');
               price = nextday;
               console.log(price);
});
standardClass.on('click', function () {
                var standard = $('#standard').data('price');
                price = standard;
                console.log(price);
            });
pickupClass.on('click', function () {
                var pickup = $('#pickup').data('price');
                price= pickup;
                console.log(price);
            });
console.log(price);

cartTotalHTML += '<div>' +
                '<ul>' +
                '<li>' +
                '<div>Subtotal</div>' +
                '<div>' + formatMoney(total) + '</div>' +
                '</li>' +
                '<li>' +
                '<div>Shipping</div>' +
                '<div>' + formatMoney(price) + '</div>' +
                '</li>' +
                '<li>' +
                '<div>Total</div>' +
                '<div>' + totalAfterShipping(total, price) + '</div' +
                '</li>' +
                '</ul>' +
                '</div>';
$('#cartOutput').html(cartItemHTML);

这是我从中获取数据的 html：

                <div class="delivery">
                            <div>Shipping method</div>
                            <div>Select the one you want</div>
                            <div class="delivery_options">
                                <label>Next day delivery
                                    <input id="nextday" type="radio" name="radio" data-name="nextday" data-price="9000">
                                    <span class="checkmark delivery1"></span>
                                    <span class="delivery_price">R90</span>
                                </label>
                                <label>Standard delivery
                                    <input id="standard" type="radio" name="radio" data-name="standard" data-price="3000">
                                    <span class="checkmark delivery2"></span>
                                    <span >R30</span>
                                </label>
                                <label>Personal pickup
                                    <input id="pickup" type="radio" checked="checked" data-name="pickup" data-price="0" name="radio">
                                    <span class="checkmark delivery3"></span>
                                    <span >Free</span>
                                </label>
                            </div>
                        </div>

这是我将数据带到的 html：

<div class="col-lg-6 offset-lg-2">
                        <div class="cart_total">
                            <div>Cart total</div>
                            <div>Final info</div>
                            <div id="cartTotalOutput">

                            </div>
                            <div><input type="submit" class="button checkout_button"></div>
                        </div>
                    </div>
                </div>

Answer 1

这里有两个问题。首先add() 是将元素添加到集合中，而不是附加事件处理程序。做你想做的事，使用click() 或on()。

其次，price 仅在点击事件发生后 更新，但您的逻辑试图立即读取它。要解决此问题，您需要将console.log() 行放入该事件处理程序中。试试这个：

var price = 0;
var $nextdayClass = $('.delivery1');

$nextdayClass.on('click', function() {
  var nextday = $('#nextday').data('price');
  price = nextday;
  console.log(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">Click me</button>

<div id="nextday" data-price="1.99">Next day: 1.99</div>

还值得注意的是，您应该尽可能避免使用全局变量。更好的使用模式是检索 data 属性，该属性包含实际需要的价格，并完全删除 price 变量。

Answer 2

它与范围无关。

看看你的代码：

1. 你得到一个元素
2. 你说当你点击元素price应该被更新（好吧，你尝试到，你打错了，叫add而不是@ 987654323@)
3. 你看price

大概在稍后的某个时间点，您会单击该元素。

此时price 已更新。

你不要再看它了。

JavaScript 不会穿越到过去并在您第一次查看之前更改 price。

控制台中显示的查看时的值记录不会改变。

如果要在单击元素后记录值，则必须将执行记录的代码放入单击元素时调用的函数中。

var price = 0;
var nextdayClass = $('.delivery1');

nextdayClass.on('click', function() {
  var nextday = $('#nextday').data('price');
  price = nextday; // The window object stuff is a waste of time
  console.log("Clicked value", price);

});
console.log("Initial value", price);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">5</button>
<span id=nextday data-price=5></span>

Answer 3

像这样尝试JQuery on()，同样我假设您的元素可能是动态生成的，尝试将事件处理程序绑定到body元素/

var price = 0;
var nextdayClass = $('.delivery1');

$('body').on('click', nextdayClass, function() {
  var nextday = $('#nextday').data('price');
  window['price'] = nextday;
});
console.log(price); //Prints out 0