0

私はJavascriptとjQueryが初めてで、javascriptを使用して何ができるかを確認するためだけにテストサイトを作成しようとしています.

私は問題があります。

ページの下部に 8 つの画像があります。画像をクリックすると、選択した画像が DIV ギャラリーに表示され、その画像がページの背景に表示されるようにしたいと考えています。別の画像をクリックすると、その画像が DIV ギャラリーと背景に表示されます。

HTML「ギャラリー」

<div id="gallery">
    <ul>
        <li class="selected"><a href="(URL Img 1)"><img src="(URL Img 1)" alt="Photo 1" /></a>    
        </li>
        <li><a href="(URL Img 2)"><img src="(URL Img 2)" alt="Photo 2" /></a>    
        </li>
        <li><a href="(URL Img 3)"><img src="(URL Img 3)" alt="Photo 3" /></a>    
        </li>
        <li><a href="(URL Img 4)"><img src="(URL Img 4)" alt="Photo 4" /></a>    
        </li>
        <li><a href="(URL Img 5)"><img src="(URL Img 5)" alt="Photo 5" /></a>    
        </li>
        <li><a href="(URL Img 6)"><img src="(URL Img 6)" alt="Photo 6" /></a>    
        </li>
        <li><a href="(URL Img 7)"><img src="(URL Img 7)" alt="Photo 7"/></a>    
        </li>
        <li><a href="(URL Img 8)"><img src="(URL Img 8)" alt="Photo 8" /></a>    
        </li>
    </ul>
</div>

HTML 背景画像

<div class="background-container" style="background-image:url('(URL Img 1');"></div>

jQuery

私はこれで何かを試しました：

$("li.selected").on("click", change);

});

しかし、それはうまくいかないようで、近づくことさえできませんでした。ミッシングリンクを知っている人はいますか？

どうもありがとうございました。-ヤヒッチュ。

4

3 に答える 3

0

要素を選択してもそのクラス属性は変更されないため、$("li.selected")常にリストの最初の要素を参照します。そうでない場合でも、ユーザーがクリックしたときではなく、ページが読み込まれたときにセレクターが (おそらく) 評価されます。したがって、選択した要素を使用するように変更しても、最初の要素が引き続き使用されます。changeユーザーがクリックしたときに実行されるのは関数自体だけです。

于 2013-07-14T09:59:21.450 に答える
0

これを試して

$(document).ready(function(){
    $("#gallery a").on("click", function(){
        $('.background-container').css('background-image',url(this.attr("href"));
    }); 
});

画像の URL が同じ場合は、<a>マークを削除して次の<img>ようにのみ再生することもできます。

$(document).ready(function(){
    $("#gallery img").on("click", function(){
        $('.background-container').css('background-image',url(this.attr("src"));
    }); 
});
于 2013-07-14T09:55:54.863 に答える