Question

我正在尝试使用jQuery更改div的宽度。它应该按比例更改为另一个div内的值。

我使用以下脚本：

var maxWidth, maxCount;

$('.view-most-commented ul li').each(function(i) {

var $this = $(this);

var thisCount = parseFloat($this.find('.comment-bar').html());

if ( i == 0 ) {

maxWidth = $this.width();

maxCount = thisCount;

}

var thisWidthStr = (thisCount / maxCount) * maxWidth;

var thisWidth=parseFloat(thisWidthStr);

$this.find('.views-field-comment-count').attr('style','max-width :'+thisWidth+'px');

});

这在FF中运行得很好，但在Chrome中，thisWidth的值是NaN。知道可能导致问题的原因是什么？

正如下面的评论所示，我试图找出每个变量的值。 Chrome中的输出是：

thisCount:NaN
maxWidth:0
maxCount:NaN
thisWidthStr:NaN
thisWidth:NaN
thisCount:NaN
thisWidthStr:NaN
thisWidth:NaN
thisCount:NaN
thisWidthStr:NaN
thisWidth:NaN
thisCount:6
thisWidthStr:NaN
thisWidth:NaN
thisCount:5
thisWidthStr:NaN
thisWidth:NaN
thisCount:5
thisWidthStr:NaN
thisWidth:NaN
thisCount:5
thisWidthStr:NaN
thisWidth:NaN
thisCount:4
thisWidthStr:NaN
thisWidth:NaN

虽然FF中的输出是：

thisCount:6
maxWidth:955
maxCount:6
thisWidthStr:955
thisWidth:955
thisCount:5
thisWidthStr:795.8333333333334
thisWidth:795.8333333333334
thisCount:5
thisWidthStr:795.8333333333334
thisWidth:795.8333333333334
thisCount:5
thisWidthStr:795.8333333333334
thisWidth:795.8333333333334
thisCount:4
thisWidthStr:636.6666666666666
thisWidth:636.6666666666666

Answer 1

我在想maxcount = 0。原因是任何数字除以零都会产生NaN，因为它在数学上是不可能的。

Answer 2

尝试改变这一点：

var thisCount = parseFloat($this.find('.comment-bar').html());

成：

var thisCount = parseFloat($this.find('.comment-bar').text().toString());

Answer 3

试试这个：

$(function () {
        var total = 0;
        var all = $('.most-commented li');
        for (var i = 0; i < all.length; i++) {
            total += parseFloat($(all[i]).find('.comment-count').text().toString());
        }
        for (var i = 0; i < all.length; i++) {
            var count = parseFloat($(all[i]).find('.comment-count').text().toString());
            var per = count / total;
            $(all[i]).find('.comment-bar').css({ width: per * 400 });
        }       
});

JavaScript仅在Google Chrome中返回NaN，在Firefox中运行良好

3 个答案: