jQuery Click函数在Firefox中工作,但在Chrome/Safari中不工作
我有一个调整div边距的按钮。我有一个函数,可以将进度条的宽度转换为百分比。然后,在单击“下一个”或“上一个”按钮时,根据该条百分比应用适当的边距 这在Firefox中运行良好,没有抛出错误,但是在Safari和Chrome中,除了识别点击之外,它根本不起作用。进度条不会移动,因此widthPerc函数似乎有问题,因为它没有通过该条件。我没有编写函数(可以在这里找到-) 我自己的点击功能如下-jQuery Click函数在Firefox中工作,但在Chrome/Safari中不工作,jquery,html,css,google-chrome,cross-browser,Jquery,Html,Css,Google Chrome,Cross Browser,我有一个调整div边距的按钮。我有一个函数,可以将进度条的宽度转换为百分比。然后,在单击“下一个”或“上一个”按钮时,根据该条百分比应用适当的边距 这在Firefox中运行良好,没有抛出错误,但是在Safari和Chrome中,除了识别点击之外,它根本不起作用。进度条不会移动,因此widthPerc函数似乎有问题,因为它没有通过该条件。我没有编写函数(可以在这里找到-) 我自己的点击功能如下- $.fn.widthPerc = function() { var parent = this
$.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.66666 7%
。在比较宽度百分比时,请尝试使用实际数字而不是字符串,并尝试将数字四舍五入以解释精度上的细微差异。例如:
$.fn.widthPerc = function() {
var parent = this.parent();
return Math.round10(this.width() / parent.width() * 100, -2);
};
然后进行以下比较:
if (progress.widthPerc() >= 33.33) {
// do stuff
}
解决了这个问题。Chrome和Safari将该值四舍五入至66%或33%,并删除小数。将条件更改为
progress.widthPerc()>=“66%”
好的,解决了问题。Chrome和Safari将该值四舍五入至66%或33%,并删除小数。将条件更改为progress.widthPerc()>='66%'
。