2

私はこれを達成しようとしています クリックイベントで2つの状態の間で背景位置を切り替える簡単な方法はありますか?

機能するはずの関数を作成しました..なぜ機能しないのか手がかりがありません. プロジェクトのこのような退屈な部分でこれを達成するために何時間も費やしましたが、それは必要です.

この機能を見てください：

$("#secondarrow").click(function(){
    /*$(".arrows").toggle( 
    function(){ 
        $(this).css({"background-position":"0px 0px"}); 
    },  
    function(){ 
        $(this).css({"background-position":"0px -30px"}); 
    });*/
    /*$(".arrows").toggleClass(function() {
    if ($(this).is(".arrows")) {
    return ".arrowsup";
    } else {
    return ".arrows";
    }
    });*/
    $('#secondarrow').toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px'); 
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    });
$("#ukmore").slideToggle(100);
$("#clause").slideToggle(100);
});

それがすべきことは、div 名の 2 番目の矢印をクリックすると、いくつかのサブカテゴリが表示され、同時に、下向きの矢印から id #arrow2 を持つ div 子の背景位置を切り替えることです (クリックを示すため)。詳細を表示するには ) を同じ背景画像の一部である上向きの矢印にします (クリックしてサブカテゴリを非表示にすることを示すため)。

私は多くの異なる関数構造を試しましたが、どれも必要に応じて機能していません.最新のもの-コメントアウトされていないもの-は、背景の位置を変更して上向きの矢印を表示しますが、それは最初のクリックと、#arrow1 div を直接クリックしたときにのみ、#secondarrow div をクリックして前後に切り替える必要がある場合にのみ実行します。

助けてください。

4

1 に答える 1

5

まず第一に、イベントの処理をもう少し練習する必要があります。

.toggleはイベントハンドラーでもあるため、基本的に、アイテムがクリックされたときに切り替えるための新しいクリックハンドラーを追加します。

あなたはこのようなことをする必要があるだけです：

$("#secondarrow").toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px');
    //do more stuff on first click
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    //do more stuff on second click
    });

上記がうまくいくかどうかは確認できません。スタックオーバーフローの質問にも、コードをjsFiddleに配置することをお勧めします。

2番目のこと

2番目の位置でcssクラスを作成してから、クラスを切り替えるクリックイベントをバインドすることをお勧めします。

$("#secondarrow").click(function(){
   $("#arrow2").toggleClass('position2');
})

そしてヒント：

FirebugまたはChrome開発ツールを使用してコードをデバッグします。セレクターが正しいかどうかを確認できます。また、セレクターのキャッシュについても読んでください。$element=$('.something'); $element.show()

于 2012-09-27T17:33:31.370 に答える