0

我对一个大而简单的脚本有疑问。单击按钮时，我需要突出显示一些 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();
            }

和其他功能代码：

颜色_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');          
            }
        }

重置颜色

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。

我究竟做错了什么？？

4

1 回答 1

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”。

于 2013-11-14T11:39:59.317 回答