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

与范围无关。

查看您的代码：

您得到一个元素
您说当单击元素price时应进行更新（嗯，您尝试进行拼写，并称为{{1} }，而不是add）
您看着on

大概是在以后的某个时刻，您单击该元素。

此时price已更新。

您不会再看它。

JavaScript不会让您时光倒流，并且会在您第一次查看之前更改price。

控制台中显示的该值的记录不会更改。

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

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);

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

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

3 个答案: