jQuery画像の切り替え

KRL87

jQueryを使用して1つの画像から別の画像に切り替える際に問題が発生しました。コンソールエラーが発生しないため、問題が何であるかわかりません。提案をいただければ幸いです。

HTML:

    <main>
        <div id="bathroom" class="switch"> </div>
    </main>

CSS:

#bathroom {
    position: absolute;
    top: 20%;
    left: 42%;
    height: 100%;

}

.switch {
    background-image: url('women.png');

}

.switchOn {
    background-image: url('men.png');
}

jQuery:

$('#bathroom').click(function(){

$('#bathroom').toggleClass('switchOn switch');

}); 

あまり起こっていませんが、ここで実際に動作しているのを見ることができます。women.pngを少し表示させたところ、消えてしまいました。

https://jsfiddle.net/c1g47o5u/

マリオA

次の2つの小さな点を除いて、コードは適切です。

  • jqueryはjsfiddleに含まれていません
  • クリックイベントのあるdivには幅がありません

だから入れて

width: 200px;

#bathroomdivクリッカブルを作ります。

jsfiddleの修正バージョンは次のとおりです:https://jsfiddle.net/2optdrbp/1/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事