我有一个大而简单的脚本问题。点击按钮时,我需要突出显示一些div的背景。一切正常,直到我添加滚动功能添加其他着色规则。
滚动时我有以下javascript代码:
$(document).ready(function(){
$(window).scroll(function()
{
var $top1 = $('.container_img_banchi_idraulici').offset().top + 330;
var $top_bpf = $('#BPF-T3000').offset().top -100;
if (($(window).scrollTop()>$top_bpf) && $('.hidden_combinati').css("display") == "block")
{
color_bpf_t3000();
}
if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")
{
no_color_bpf();
}
和其他功能代码:
COLOR_BPF:
function color_bpf_t3000(){
for (i = 0; i<BPF_T3000.length; i++){
$('#'+BPF_T3000[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
$('#'+BPF_T3000[i]+' + a').css('font-weight', 'bold');
}
for (i = 0; i<BPF_T3000_optional.length; i++){
$('#'+BPF_T3000_optional[i]+'.rettangolo_test').animate({ backgroundColor: color_yellow });
$('#'+BPF_T3000_optional[i]+' + a').css('font-weight', 'bold');
}
}
NO_COLOR
function decolora_bpf(){
reset_colors();
for (i = 0; i<combinati.length; i++){
$('#'+combinati[i]+'.rettangolo_test').animate({ backgroundColor: color_green });
$('#'+combinati[i]+' + a').css('font-weight', 'bold');
}
}
RESET_COLOR
function resetta_colori(){
$('.rettangolo_test').css('background-color', color_white);
$('.rettangolo_test + a').css('font-weight', 'normal');
}
即使.hidden_combinati没有显示,也会执行no_color_bpf。
但如果我写代码
if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")
{
alert("hello");
no_color_bpf();
}
一切正常。
似乎在显示无效之前执行该功能。我试图用.delay()和其他方法延迟函数,但无法解决。
有什么建议吗?
谢谢!
编辑1 var scrolltop = $(window).scrollTop();
console.log("scrolltop "+scrolltop);
console.log("top_Btp "+top_bpf);
console.log("display " +$('.hidden_combinati').css("display"));
console.log("if " + scrolltop<top_bpf && $('.hidden_combinati').is(':visible'));
console.log("if2 " +scrolltop < top_bpf);
console.log("if2 " +scrolltop > top_bpf);
输出如下:
top_Btp 911
display block
false
false
false
scrolltop 506
top_Btp 911
display block
false
false
false
scrolltop 507
top_Btp 911
display block
false
false
false
即使当scrollTop超过Top_bpt时也是如此。
我做错了什么?
答案 0 :(得分:1)
我觉得使用console.log()调试我的代码非常有用,可以检查出错的地方。我会跑一个
console.log($(window).scrollTop());
console.log($top_bpf);
console.log($('.hidden_combinati').css("display"));
首先,确保条件成立的原因。
console.log()输出到javascript控制台,可在Chrome中的“inspect element”和firefox的“firebug”找到。