jQuery 点击功能在 Firefox 中可用但不可用 Chrome/Safari

Question

我有一个按钮可以调整 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');
        });
    }
});

Answer 1

很可能您的 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
}

Answer 2

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

jQuery 点击功能在 Firefox 中可用但不可用 Chrome/Safari

jQuery Click function working in Firefox but not Chrome/Safari

html

css

jquery

google-chrome

cross-browser