1

リンクをクリックしたときにフォトビューアーで写真を変更するのに問題があります (ライブ サイトhttp://ericnaff.com/web2/index-FILL-IN.html )。私はどこでも解決策を探しましたが、何も得られませんでした。これが私の HTML、次に CSS、そして私の jQuery です。リンクが機能するようになりましたが、再クリックしても画像は変わりません。例 - リンクをクリックすると、写真が右の写真に変わります。クリックして写真に戻ろうとしても、うまくいきません。

 <body>

<div id="imageWindow">
    <div class="imagePane firstPic"></div><!-- ends first -->
    <div class="imagePane secondPic"></div><!-- ends second -->
    <div class="imagePane thirdPic"></div><!-- ends third -->
    <div class="imagePane fourthPic"></div><!-- ends fourth -->

    <ul>
        <li class="firstPic">first-pic</li>
        <li class="secondPic">second-pic</li>
        <li class="thirdPic">third-pic</li>
        <li class="fourthPic">fourth-pic</li>
    </ul>

</div>

CSS

    #imageWindow {/* 1 CSS attribute */position:absolute 0px 0px;}

/* common image container and stacking */
    .imagePane {
        /* 4 CSS attributes */
        position:absolute;
        background-image: url(http://www.ericnaff.com/web2/images/park-    
                    sprite.jpg);
        width:450px;
        height:400px;
        }

/* these classes are used to determine the stacking order of the image container divs */
    .front {/* 1 CSS attribute */ z-index:1}
    .behind {/* 1 CSS attribute */ z-index:-1}

/* used to display a different picture in each container */             
    .firstPic {/* 1 CSS attribute */ background-position:0px 0;}
    .secondPic {/* 1 CSS attribute */background-position:450px 0;}
    .thirdPic {/* 1 CSS attribute */background-position:900px 0;}
    .fourthPic {/* 1 CSS attribute */background-position:1350px 0;}


/* used to style the list */
    ul {        
        /* 2 CSS attributes */
        width:75px;
        margin-left:450px;
    }

    li {
        /* 1 CSS attribute */
        list-style-type:none;           
    }

    li:hover {
        /* 2 CSS attributes */
        background-color:#999999;
        cursor:pointer;
    }

私のJQUERY-

    $(document).ready(function(){
    $('li.firstPic').click(function() {
                $('.firstPic').fadeIn().addClass('front');                  

            });

        $('li.secondPic').click(function() { 
                $('.secondPic').fadeIn().addClass('front');

            });

        $('li.thirdPic').click(function() {
                $('.thirdPic').fadeIn().addClass('front');

            });

        $('li.fourthPic').click(function() {
                $('.fourthPic').fadeIn().addClass('front');

            });

    });

何か案は？HTML を変更することはできず、示されている量の CSS を使用する必要があります。私はこれが初めてで、本当に混乱しています。私はこの解決策を試していました-

$('.targetX').functionA('targetS').functionB('targetT');                    
$('tag.targetY').functionA('targetT').functionB('targetS');

私はそれを機能させる方法がわかりません。私が言ったように、最初の部分は機能しましたが、リンクを複数回機能させることはできません。ヘルプ/提案をありがとう。

エリック

4

2 に答える 2

1

各リンクは、front対応するにクラスを追加します<div>が、以前に追加されたクラスは削除しません。

たとえば、クリックするたびにこの関数を追加できます。

function resetClasses() {
    $('li').each(function() {
        $(this).removeClass('front');
    });
}

$(document).ready(function(){
    $('li.firstPic').click(function() {
                resetClasses();
                $('.firstPic').fadeIn().addClass('front');                  

            });

    $('li.secondPic').click(function() { 
            resetClasses();
            $('.secondPic').fadeIn().addClass('front');

        });

    $('li.thirdPic').click(function() {
            resetClasses();
            $('.thirdPic').fadeIn().addClass('front');

        });

    $('li.fourthPic').click(function() {
            resetClasses();
            $('.fourthPic').fadeIn().addClass('front');

        });

});
于 2012-11-11T23:56:15.587 に答える
1

frontこれは、クラスを追加する前に、前のクラスfrontがまだクリアされていないためです。すべてのクリックブロックにこれを追加します$('.front').removeClass('.front');

しかし、私はこのようなものを提案できると思います：

$('.imagePane').click(function() {
   //get the second class name as the selector of li
   var picSelector = $(this).attr('class').split(" ")[1];

   $('.front').removeClass('front');
   $('li.'+picSelector).addClass('front');
});

申し訳ありませんが、まだテストしていませんが、アイデアが浮かんだことを願っています。

于 2012-11-11T23:48:41.550 に答える