javascript - 单击时获取所有 div 宽度的总和

Question

我正在尝试获取页面上所有 div 宽度的总和，并在点击警报时显示它

我面临的问题是，当我再次单击按钮以显示总和时，结果返回双倍，如果我第三次再次单击，结果返回三倍，依此类推

我在 jsfiddle 中的代码 http://jsfiddle.net/Jim_Toth/enypx/

HTML

<button>Size of all divs?</button><br>
<div style="width: 100px;">REMOVE</div>
<div style="width: 150px;">REMOVE</div>
<div style="width: 200px;">REMOVE</div>
<div style="width: 150px;">REMOVE</div>
<div style="width: 100px;">REMOVE</div>

jQuery

var divs = 0;
$('button').click(function () {
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
});

$('div').click(function () {
    $(this).remove();
});

Answer 1

在点击处理程序中，您需要重置 divs 变量的值...它也可以是局部变量

在您的例子中，divs 是一个全局变量，其初始值为 0，当您第一次单击该按钮时，它会更新为值 x - 现在共享变量的值为 x。现在，当您再次单击按钮而不是从值 0 开始时，变量值将从 x 开始。

$('button').click(function () {
    var divs = 0;
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
});

演示:Fiddle