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，当您第一次单击按钮时，它会更新为 value x- 现在共享变量的值是x。现在，当您再次单击按钮而不是从值开始时0，变量值将从 开始x。

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

演示：小提琴

Answer 2

问题是存储宽度 ( divs) 的变量比特定函数调用的寿命更长。divs在 click 函数内移动变量，如下所示：

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

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

在函数内移动变量将变量的生存时间限制为函数执行的时间。请记住，您将无法在此函数之外访问此变量。

Answer 3

在关闭点击功能之前重置var divs为。0

var divs = 0;
$('button').click(function () {
    $('div').each(function () {
        divs += $(this).outerWidth(true);
    });
    alert(divs + 'px');
    divs = 0;     // NOTE: reset divs. Value retains with every
                  // click otherwise.
});

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

Answer 4

你必须var divs=0;在每次按钮点击时设置

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

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

演示

Answer 5

试试这个：

使用提供额外填充等的外宽度

  $(selector).outerWidth(true) ;

演示

您可以将 width() 用于您提供的 div 宽度

演示