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

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

DEMO

Answer 5

试试这个：

使用提供额外填充等的outerWidth

  $(selector).outerWidth(true) ;

Demo

你可以使用width（）来提供你提供的div宽度

Demo

点击即可获得所有div宽度的总和

5 个答案: