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();
            }

およびその他の関数コード:

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 に display none がある場合でも no_color_bpf が実行されるということです。

しかし、次のようなコードを書くと 

             if (($(window).scrollTop()<$top_bpf) && $('.hidden_combinati').css("display") == "block")    
            {
            alert("hello"); 
             no_color_bpf();
            }

すべて正常に動作します。

表示がなくなる前に関数が実行されているようです。.delay() やその他の方法で関数を遅らせようとしましたが、解決する方法はありません。

何かアドバイス？

ありがとう！

EDIT 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() は、Chrome では「inspect element」、firefox では「firebug」にある javascript コンソールに出力します。

于 2013-11-14T11:39:59.317 に答える