1

私は現在、ある種のスライドショーを作成しています。これは単なるフロアプランなので、見栄えがよくないはずです。リンク番号を使用してフロアを指定しています。リンクの1つをクリックすると、対応するフロア画像が表示されます。

私が現在持っているコードの下に..しかし、画像のsrcはクリックしても変化しません。私は何が間違っているのですか？

ありがとう！

        <div id="bovengedeelte">
        <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
        </div>

        <div id="ondergedeelte">
        <script type="text/javascript">
        $("a.floor0").click(function(event){
          $("img.plattegrond").attr("src","floor0.png");
        });
            $("a.floor1").click(function(event){
          $("img.plattegrond").attr("src","floor1.png");
        });     
            $("a.floor2").click(function(event){
          $("img.plattegrond").attr("src","floor2.png");
        });     
        $("a.floor3").click(function(event){
          $("img.plattegrond").attr("src","floor3.png");
        });         
        $("a.floor4").click(function(event){
          $("img.plattegrond").attr("src","floor4.png");
        });         
        $("a.floor5").click(function(event){
          $("img.plattegrond").attr("src","floor5.png");
        });         </script>
        <p>Kies een verdieping</p>
        <a id="floor0" href="#">0</a><a id="floor1" href="#">1</a><a id="floor2" href="#">2</a><a id="floor3" href="#">3</a><a id="floor4" href="#">4</a><a id="floor5" href="#">5</a>
        </div>

**すべての人に：すべてのソリューションの後でまだ機能していません。すでにありがとう！誰かがコード全体をチェックして、私が間違っていることを確認できますか？：s

http://prototyping.iscs.nl/

****

4

3 に答える 3

2

必要なのはこれだけです：

フィドルデモ

    <div id="bovengedeelte">
          <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
    </div>

    <div id="ondergedeelte">

        <p>Kies een verdieping</p>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>

    </div>

jQ：

$(function(){ // document ready shorthand

    $('#ondergedeelte a').click(function( e ){
         e.preventDefault();
         var newImgUrl = 'floor'+ $(this).text() +'.png' ;
         $('#plattegrond').attr('src', newImgUrl );
    });

});
于 2012-11-23T13:59:29.443 に答える
1

したがって、あなたが持っているものの代わりにで正しく検索していませaん。これは機能します：classid

$("a#floor5").click(function(event) {
    $("img#plattegrond").attr("src","floor5.png");
});

コメントの@JayBlanchardは完全に正しいです。

また、デバッグして適切な要素が見つかったかどうかを確認する良い方法は、次のconsole.logようにjQueryオブジェクトを使用するconsole.log($("a#floor5"));ことです。探している要素が出力される場合は、続行しても問題ありません。

于 2012-11-23T13:54:32.247 に答える
1

IDの代わりにjQueryセレクターでクラスを使用しているためです。さらに、次のようにjQueryコードを短縮できます-

$('a').click(function(e) {
    e.preventDefault();
    var thisNumber = id.substr(id.length - 1);
    $('img#plattergrond').attr('src', 'floor' + thisNumber + '.png');
});

これで、追加されたリンクや画像の数に関係なく、それらは適切に処理されます。

于 2012-11-23T13:56:33.670 に答える