0

現在、背景画像にカーソルを合わせて、別のdivに新しい画像を表示しようとしています。これは（以下のコードで）機能しますが、画像をクリックしたときに変更できないようです。以下は私が達成しようとしていることを表す画像です。

1 http://pkg.madisonmottdev.com/images/1.png

ホバーまたはクリックしたとき（2階も同じ） 2 http://pkg.madisonmottdev.com/images/2.png

現在ホバリングに使用しているJavascriptコード。これは正しく機能します。クリックする方法がわかりません（1階または2階で、右側に変更してもらいます）。どんな助けでも大歓迎です。

 $(window).load(function(){
        $(document).ready(function(){
            // FIRST FLOOR
            $('.floor1').mouseover(function(){
                $('.floor1').css('background', 'url("images/phase-2/first-floor-hover.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/first-floor-lg.a.png") no-repeat');
            });
            $('.floor1').mouseout(function(){
                $('.floor1').css('background', 'url("images/phase-2/first-floor.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/elevation.a.png") no-repeat');
            });

             // SECOND FLOOR
            $('.floor2').mouseover(function(){
                $('.floor2').css('background', 'url("images/phase-2/second-floor-hover.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/second-floor-lg.a.png") no-repeat');
            });
            $('.floor2').mouseout(function(){
                $('.floor2').css('background', 'url("images/phase-2/second-floor.a.png") no-repeat');
                $('#elevation').css('background', 'url("images/phase-2/elevation.a.png") no-repeat');
            });

        });
    });

HTMLコード（floor1、floor2、および標高は、高さ/幅の背景画像に設定されます）： 

        <div id="building">
                <div id="floor">
                  <div class="floor1"></div>
                </div>

                <div id="floor">
                  <div class="floor2"></div>
                </div>
        </div>
4

2 に答える 2

2

クリックイベントにバインドされたリスナーがないため、クリックしても何も起こりません。

コードの一部を次のように変更してみてください。

    // FIRST FLOOR
    $('.floor1').click(function(){
        $('.floor1').css('background', 'url("images/phase-2/first-floor-hover.a.png") no-repeat');
        $('#elevation').css('background', 'url("images/phase-2/first-floor-lg.a.png") no-repeat');
    });
    $('.floor1').mouseout(function(){
        $('.floor1').css('background', 'url("images/phase-2/first-floor.a.png") no-repeat');
        $('#elevation').css('background', 'url("images/phase-2/elevation.a.png") no-repeat');
    });

動作の違いがわかります-私はからイベントに変更しmouseoverましclickた。

次のように、複数のイベントを同じリスナーにバインドできます。

$('.floor1').bind('click mouseover', function() {...});

編集

あなたの最後のコメントに続いて、あなたが求めていることを達成するためにこのフィドルを見てください：

http://jsfiddle.net/BzPdB/

于 2012-06-06T14:10:35.460 に答える
2

このようなものはあなたが求めているものですか？

http://jsfiddle.net/98wuW/19/

秘訣は、floor1をクリックした場合、floor1.mouseoutは#elevationのfloor1画像を削除できないことです。

現状では、floor1.mouseoutを使用して、＃elevationの背景画像をデフォルトに戻すことができます。したがって、floor1にカーソルを合わせたとします。次に、マウスをfloor1から移動します。次に、floor1.mouseoutは、＃elevationの背景画像をデフォルトに戻します。

秘訣は、floor1をクリックすると、「floor1の画像を#elevationに保持する」というフラグなどを設定する必要があるということです。次に、マウスアウトで、そのフラグをチェックして、＃elevationの床の画像を削除できるかどうかを確認できます。

例では少し注意が必要です。2つのフロアがあり、どちらもクリックできるため、各マウスアウトで2つのフラグを確認する必要があります。

于 2012-06-06T14:48:43.760 に答える