我有一个调整 div 边距的按钮。我有一个将进度条的宽度转换为百分比的函数。然后根据单击下一个或上一个按钮时的条形百分比应用适当的边距。
这在 Firefox 中运行良好，没有抛出错误，但是在 Safari 和 Chrome 中，除了识别出点击之外，它根本不起作用。进度条不会移动，所以这似乎是 widthPerc 函数的问题，因为它没有超过条件。我没有写函数（可以在这里找到 - jQuery if width is equal to percent）
我自己的点击功能如下 -
$.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');
});
}
});
您的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
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句