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"에는 콘텐츠가 없습니다. 일부 콘텐츠를 추가하고 – MohamedSanaulla

을 참조하십시오. $ (function() {// your event binding})의 이벤트를 바인딩하는 것이 좋습니다. 문서로드시 실행되도록 – MohamedSanaulla

@GvM은 문제가되지 않아야합니다. – MohamedSanaulla

요소의 높이는 내용을 기준으로합니다. #wingLeft 및 #wingRight처럼 높이를 지정하면 0의 100 %를 0으로 취합니다.

클래스가 높이에 단단한 값 (예 : 100 픽셀)을 할당하면 jQuery는 정상적으로 작동합니다. 다음은 업데이트 된 펜입니다. 를주는 것은 높이 또한 만다라를 중심 것을

는

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

알 수 있습니다.

PS - CodePen에는 <head>이 포함되어 있으며 <script>은 JS 입력란에 입력 할 수 있습니다. 설정 탭에서 텍스트에 링크하지 않고 jQuery에서로드 할 수 있습니다.

출처

2016-11-02 05:59:58 Naltroc

CodePen을 제공 해주셔서 감사합니다. 높이를 100 %로 설정하면 몸의 전체 높이가 될 것이라고 추측됩니다 ... 생각해 보겠습니다. 높이를 정의했는지 확신 할 수 없습니다. 그들은 문제일지도 모른다. –

@SeanWoodfin, 문제 없음. '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에있는 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 요소에는 높이가 지정되지 않았거나 하위가 포함되어 있지 않으면 div가 표시되지 않습니다.

출처

2016-11-02 06:09:34

jQuery를 사용하여 하나의 요소에 다른 요소가있을 때 클래스를 할당합니다.

답변

관련 문제