5

私はjavascriptとjQueryを初めて使用するので、この質問はばかげているように見えるかもしれませんが、例やドキュメントが見つかりませんでした。

私はうまく動作する小さなカラーアニメーションのロールオーバーとロールアウトのためにこの関数を手に入れました:

$(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
);

それがうまく機能するスタイルシート変更ボタンを最近追加した場合の事実:

$(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        return false;
    });

ポイントは、ロールオーバー メニューに条件を作成して、このメニューの色も切り替えることができるようにすることです。

だから私はこのようないくつかのことを試しました:

/////////////////////////////////////////////////////////////////////////////
    //Stylesheet change
    $(".black-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "black";
        return false;
    });

    $(".grey-white").click(function(){
        $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
        $(".wp-polls-loading").css({ display:"none"});
        var tt = "grey";
        return false;
    });

    /////////////////////////////////////////////////////////////////////////////
    //Over menu
    if (tt == "black"){
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#fff"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); }
        );
    }else {
        $(".box_nav").hover(function(){
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#000"}, 300 ); },
        function() {
            jQuery(this).stop(true, false);
            $(this).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
        );
    }

でももちろん行きません。少しうまくいく唯一のことは、if () の「黒」を変更するか、他の何かを変更すると、2 番目のロールオーバー スタイルがうまくいくことです。

何か案が ？

4

6 に答える 6

2

変数「tt」をローカルで宣言し、見た目からグローバルにアクセスしようとしています。コードの構造全体を確認できないため、特定できませんが、変更した場合:

var tt = ....

に

window.tt = ....

それはおそらくうまくいくでしょう。メソッドまたはクロージャー内でスコープできる場合は、これをグローバル変数にすることはお勧めしませんが、上記を実行すると、少なくともこれが問題であるかどうかが証明されます。

于 2010-01-13T14:17:06.253 に答える
1

ここでの問題は、変数ttがクリック関数のスコープ内にのみ存在することです。あなたができることは、前にttを宣言してから、クリックアクション内に設定することです。

var tt = 'black'; // Default to black

$(".black-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-white.css");
    $(".wp-polls-loading").css({ display:"none"});
    tt = "black";
    return false;
});

$(".grey-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
    $(".wp-polls-loading").css({ display:"none"});
    tt = "grey";
    return false;
});

この時点で、tt「黒」または「灰色」のいずれかになり、ifステートメントでチェックしている範囲内に存在します。

また、$は のエイリアスでjQueryあるため、2 つを切り替える必要はありません。$すべてが一貫しているように、アニメーションを停止しようとしているときに使用できます。

更新: 問題 (すべてのコードが表示されないため、確信が持てません) は、ドキュメントが読み込まれたときにホバー イベントを宣言していることだと思います。この場合、常にブラック ホバーが使用されます。スタイルシートが変更されたときにホバーが更新されるように、ホバーコードをスタイルシート変更関数内に配置する必要があります。次に例を示します。

$(".black-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-black-    white.css");
    $(".wp-polls-loading").css({ display:"none"});

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

    $(".box_nav").hover(function(){
        $(this).stop(true, false).animate({ backgroundColor: "#fff"}, 300 ); },
    function() {
        $(this).stop(true, false).animate({ backgroundColor: "#000"}, 300 ); }
    );

    return false;
});

$(".grey-white").click(function(){
    $("link").attr("href", "<?php bloginfo("template_url"); ?>/css/styles-grey-white.css");
    $(".wp-polls-loading").css({ display:"none"});

    // First unbind old hover
    $('.box_nav').unbind('mouseover').unbind('mouseout');

    $(".box_nav").hover(function(){
        $(this).stop(true, false).animate({ backgroundColor: "#000"}, 300 ); },
    function() {
        $(this).stop(true, false).animate({ backgroundColor: "#e2e2e2"}, 300 ); }
    );

    return false;
});
于 2010-01-13T14:18:13.617 に答える
0

tt1 つには、関数の範囲外で varを使用しています。そのクリック関数内で宣言すると、そのブロックの外では見えません。最初にグローバルに宣言する必要があります。

于 2010-01-13T14:19:25.703 に答える