Question

我正在尝试根据页面上存在的min-width的数量以及180px的填充动态计算body的{{1}}。这是我正在使用的代码：

div.columns

有关为什么不能正常工作的任何线索？

Answer 1

这是由于columns变量的范围。您需要将其设置为全局，或将其分配给函数的结果，后者更可取。试试这个：

function countColumns() {
    return $('.column').size(); 
}

$('body').css('min-width', (parseInt(countColumns()) * 120) + 180 + 'px') );

注意，parseInt是多余的，因为size()方法将始终返回整数。

Answer 2

由于columns变量是在函数内部定义的，因此无法在其外部访问。您应该在外部或全局范围内定义它。试试这个。

var columns;
function countColumns() {
    columns =  $('.column').size(); 
    document.write(columns)
}

$('body').css('min-width', ((parseInt(columns) * 120) + 180) + 'px') );

或者你甚至可以调用将返回列数的函数。这样您就不必维护变量。同样在countColumns函数中，我使用jQuery对象的lenght属性，它给出了相同的结果，也避免了一个函数调用。试试这个

   function countColumns() {
        return  $('.column').length; 
    }

    $('body').css('min-width', ((countColumns * 120) + 180) + 'px') );

Answer 3

您要在函数范围内设置列变量，请尝试使用

var columns
function countColumns() {
    columns =  $('.column').size(); 
    document.write(columns)
}

$('body').css('min-width', (parseInt(columns) * 120) + 180 + 'px') );

Answer 4

这应该有效

$(document).ready(function() {

  var minWidth = ($('.column').length * 120) + 180);
  $('body').css('min-width', (minWidth + 'px') );

});

从未见过有人在min-width使用<body>：P

将jQuery变量传递给CSS

4 个答案: