jQueryを使用して、ある要素をクラスに割り当てます。

ページの中央にあるdivが表示されたときに表示される、ページの側面にエフェクトを作成しようとしています。私はこれを行うためにjQueryを使用しています。jQueryを使用して、ある要素をクラスに割り当てます。

私の最も有用な診断手法（私のJSの一部にアラートを使用）を試しましたが、私のコードがなぜ動いていないのか分かりません。事前に

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script> 
    <script> 
    $("#shadow").hover(
       function() { 
        $("#wingRight").addClass("shown"); 
       }, function() { 
        $("#wingRight").removeClass("shown"); 
       } 
      ); 
      $("#light").hover(
       function() { 
        $("#wingLeft").addClass("shown"); 
       }, function() { 
        $("#wingLeft").removeClass("shown"); 
       } 
      ); 
    </script>

Heres my code pen for the site so far

ありがとう！

出典

2016-11-02 Sean Woodfin

id = "wingLeft"とid = "wingRight"のコンテンツはありません。いくつかのコンテンツを追加して、$（function（）{//あなたのイベントバインディング}のイベントをバインドするのに良いことを加えて、 – MohamedSanaulla

を参照してください。ドキュメントロードで実行されるようにする – MohamedSanaulla

@GvMこれは問題ではないはずです – MohamedSanaulla

要素の高さはその内容に基づいています。 #wingLeftと#wingRightの場合と同じように、高さを割り当てると、0の100％を0にします。

クラスが高さに100pxなどの硬い値を割り当てる場合は、 jQueryはうまく動作します。ここに更新されたペンがあります。

http://codepen.io/WallyNally/pen/QKeeRj

彼らに高さを与えることも、あなたの曼荼羅を中心にということに注意してください。

PS - CodePenには<head>が含まれ、<script>にはJSフィールドが入ります。設定タブでは、テキスト内でリンクすることなくjQueryでロードできます。

出典

2016-11-02 05:59:58 Naltroc

あなたにCodePenを提供していただきありがとうございます。身長の高さを100％に設定しました。身長の高さを決めるのかどうかは分かりません。彼らは問題だったかもしれない。 –

@SeanWoodfin、probはありません。 'vw'と' vh'単位に興味があるかもしれません。彼らはパーセントと固定数の間の両方の単語の中で最高です。 '100vw'はビューポートの幅の100％に等しく、' 100vh'はビューポートの高さの100％に等しい - その違いは、vw/vhがパーセンテージの代わりに数値として計算されることです。はい、常にボディのディメンションを定義する必要があります。私のCSSは、ほとんどの場合、 'body {width：100vw;高さ：100vh;} ' – Naltroc

これは、#wingLeftと#wingRightの高さが0であることが原因です（少なくとも、あなたのコードパッドで起こることです）。

出典

2016-11-02 05:43:15 wscourge

あなたのwingLeft divとwingRight divにminheightを追加しようとすると、あなたが抱えているdivを見ることができます。

#wingLeft{ 
    width: 33.3%; 
    height: 100%; 
    min-height: 50px; 
} 
#wingRight{ 
    width: 33.3%; 
    height: 100%; 
    min-height: 50px; 
}

出典

2016-11-02 05:49:36

要素div #wingLeftおよび#wingRightには、何かが含まれている必要があります。また、min-height.uには、高さが指定されていない場合、または子が含まれていない場合、divは表示されません。

出典

2016-11-02 06:09:34

jQueryを使用して、ある要素をクラスに割り当てます。

答えて

関連する問題