2014-05-09 3 views
-2

Jquery를 사용하여 div의 클래스를 # house1 요소로 토글하려고 시도하지만, 내가 무엇을 하든지 상관없이 클릭 할 때마다 숨기고 싶지 않은 것 같습니다.jquery가이 div 클래스를 토글하지 않는 이유는 무엇입니까?

<!DOCTYPE html> 
    <html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'> 
     <link href="bas.css" type="text/css" rel="stylesheet"/> 
     <meta charset="utf-8"/> 
     <title>Jans Fastigheter</title> 
    </head> 
    <body> 
    <div class="header"> 
     <div> 
      <img src="jans_logo.jpg"> 
     </div> 
     <ul> 
      <li><a class="current_huvud" href="Huvudsida.html">Huvudsida</a></li> 
      <li><a href="kontakta oss.html">Kontakta Oss</a></li> 
     </ul> 
    </div> 
    <div> 
     <div id="house1"> 
     </div> 
     <div id="house2"> 
     </div> 
     <div id="house3"> 
     </div> 
    </div> 

    <script> 
    $(document).ready(function() { 
     $("#house1").click(function() { 
      $(this).toggleclass("hide"); 
     }); 
    }); 
    </script> 
    </body> 
    </html> 

그리고 관련 CSS 코드 :

#house1 { 
width:250px; 
height:250px; 
margin: 30px 30%; 
background-image: url("apartment_building.jpg"); 
background-size: cover; 
    } 
    .hide { 
display: none; 
    } 
+4

''toggleclass''는''toggleClass''가되어야합니다. –

+3

브라우저의 콘솔에있는 오류 메시지를 한 번 봐서 즉시 대답 할 수 있습니다. 미래를 들여다 보는 습관을 만드십시오. – Jon

답변

2

변경 $(this).toggleclass("hide");$(this).toggleClass("hide");

이 코드

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

+0

정말 고마워요. , 나는 처음부터 Jquery를 포함하는 것을 잊었다. – Farmer

1

이가 있어야한다 : 대신

$(this).toggleClass("hide"); 

:

이 스크립트와 함께 관련 HTML 코드는

$(this).toggleclass("hide"); 

C은 또한 확실히 JQuery와 페이지에 포함되어 있는지 확인 toggleClass()

의 수도, 내가 페이지에 포함 표시되지 않습니다. 페이지에서 행 다음에

추가 :

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
+0

안녕하세요, 자바 스크립트 IDE에서 Intellisense가 이러한 종류의 오류를 잡아내는 것에 대해 알려주실 수 있습니까? 왜냐하면 나는 자바 스크립트를 배우고 싶다. 감사. –

+0

Dreamwaever 내가 좋은 것 같아 –

+0

이것을 참조하십시오 : http : //stackoverflow.com/questions/7794719/best-ide-for-html5-javascript-css-jquery-support-with-gui-building-tools –

1

jsfiddle

에 jQuery를 포함
<div> 
     <div class="house" > 
      aaaaa 
     </div> 
     <div class="house" > 
      bbbb 
     </div> 
     <div class="house"> 
      cccc 
     </div> 
    </div> 

    $(document).ready(function() { 
    $(".house").click(function() { 
      $(this).toggleClass("hide"); 
    }); 
    }); 
관련 문제