jQuery Click 函数在 Firefox 中工作，但在 Chrome/Safari 中不可用答案

【问题标题】：jQuery Click function working in Firefox but not Chrome/SafarijQuery Click 函数在 Firefox 中工作，但在 Chrome/Safari 中不可用
【发布时间】：2017-10-10 16:34:42
【问题描述】：

我有一个按钮可以调整 div 的边距。我有一个将进度条的宽度转换为百分比的函数。然后在单击下一个或上一个按钮时根据该条百分比应用适当的边距。

这在 Firefox 中运行良好，没有抛出任何错误，但在 Safari 和 Chrome 中，除了识别已进行点击外，它根本不起作用。进度条不会移动，所以它似乎是 widthPerc 函数的问题，因为它没有超过条件。函数不是我写的（可以在这里找到-jQuery if width is equal to percentage）

我自己的点击功能如下-

$.fn.widthPerc = function() {
    var parent = this.parent();
    return ~~((this.width() / parent.width()) * 100) + '%';
};
$('.next-q').not('.two-questions .next-q').click(function() {
    var container = $(this).parents().eq(2);
    var questions = container.find('.questions');
    var progress = container.find('.form-progress .bar');
    var prev = container.find('.prev-q');
    var prevone = container.find('.question-steps.questions-one .prev-q');
    var prevs = container.find('.prev-s');
    var complete = container.find('.complete-q, .next-s');
    if (progress.widthPerc() === '66.66%') {
        progress.animate({
            width: '-=33.33%',
        }, 400);
        questions.css({
            'margin-left': '-100%'
        });
        prevs.fadeOut('400', function() {
            prev.fadeIn('400');
        });
        prevone.fadeIn('400');
    } else if (progress.widthPerc() === '33.33%') {
        progress.animate({
            width: '-=33.33%',
        }, 400);
        questions.css({
            'margin-left': '-200%'
        });
        $(this).fadeOut('400', function() {
            complete.fadeIn('400');
        });
    }
});

【问题讨论】：

好的，问题解决了。 Chrome 和 Safari 将该值四舍五入为 66% 或 33% 并删除小数点。将条件更改为progress.widthPerc() >= '66%''。

标签： jquery html css google-chrome cross-browser

【解决方案1】：

解决了这个问题。 Chrome 和 Safari 将该值四舍五入为 66% 或 33% 并删除小数点。将条件更改为progress.widthPerc() >= '66%'

【讨论】：

【解决方案2】：

您的widthPerc 函数很可能返回一个浮点数，其精度高于小数点后两位，因此可能类似于66.666667%。在比较宽度百分比时，尝试使用实际数字而不是字符串，并尝试将数字四舍五入以解决精度上的细微差异。例如：

$.fn.widthPerc = function() {
    var parent = this.parent();
    return Math.round10(this.width() / parent.width() * 100, -2);
};

然后做如下比较：

if (progress.widthPerc() >= 33.33) {
    // do stuff
}

【讨论】：