jQuery 함수 showHide()가 정의되지 않은 이유는 무엇입니까?

저는 jQuery를 사용하려고 할 때 정말 새로운 것이므로, 간단한 질문 일 가능성이 있는지 물어보기 위해 저를 용서해주십시오. 아마 심지어 jQuery와 관련이 없지만, 어쨌든 여기 시나리오가 있습니다. 사용자가 페이지에서 학습자의 앵커 태그 위에 마우스를 올려 놓았을 때에 만 표시하고 싶은 숨겨진 div를 넣으려고합니다. 저는 하나의 앵커 태그로 시작했습니다. 다른 태그를 구현하기 전에 먼저 앵커 태그가 작동하도록했습니다. 위의 스타일을 사용하여, 나는 정렬되지 않은 목록을 정의한jQuery 함수 showHide()가 정의되지 않은 이유는 무엇입니까?

<script src="js/jquery-1.11.1.js" type="text/javascript" ></script> 
<style type="text/css"> 
#navcontainer ul { list-style-type: none; } 
#navcontainer ul li { display: inline; } 
#navcontainer ul li a 
{ 
text-decoration:none; 
padding: .2em 1em; 
} 
</style>

다음 : 나는 jQuery 라이브러리를 다운로드에 대한 참조를 포함, 그래서 여기 내 페이지의 머리 부분에있어 무엇의 일부입니다 그것을 수평으로 만들고 그 뒤에 숨겨진 div가 있습니다. 사용자가 정렬되지 않은 목록의 첫 번째 앵커 위로 마우스를 움직일 때 표시하고 싶습니다. body 태그 내의 관련 HTML은 다음과 같습니다.

<body> 
<div id="navcontainer"> 
<ul> 
<li><a href="index.htm">Home</a></li> 
<li><a href="#" onmouseout="showHide('dropdown1', false)" onmouseover="showHide('dropdown1', true); return false;">Learners</a></li> 
<li><a href="#">Teachers</a></li> 
<li><a href="#">Businesses</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
<div id="dropdown1" style="visibility:hidden;"> 
<ul> 
<li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a></li> 
<li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a></li> 
<li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a></li> 
</ul> 
</div> 
<!-- other HTML code --> 
</body>

그러나 브라우저 (IE11)에서 이것을 실행하면 아무런 변화가 없습니다. IE11에 내장 된 F12 웹 개발자 도구를 사용하여 "showHide is undefined"오류가 발생한다는 것을 알게되었습니다. 왜 그 일을하는거야? showHide() 함수는 jquery-1-11.1.js 파일에서 가장 확실합니다.이 파일은 js 폴더에 있습니다. 내가 잘못했거나 고려하지 않은 것은 무엇입니까?

출처

2014-07-19 Rod

당신이 현재 시나리오에서 toggle() 또는 show() 또는 hide() 를 사용할 수 가다가 $ (이)로 몇 것 showHide으로 그런 기능이 없습니다. 또는 선택한 선택자.

jQuery를 사용하여 특정 요소를 타겟팅하는 예는 클래스 hover-learners을 추가하고 아래 선택자를 사용하여 타겟팅합니다.

HTML :

<div id="navcontainer"> 
    <ul> 
     <li><a href="index.htm">Home</a> 

     </li> 
     <li><a href="#" class="hover-learners">Learners</a> 

     </li> 
     <li><a href="#">Teachers</a> 

     </li> 
     <li><a href="#">Businesses</a> 

     </li> 
     <li><a href="#">Contact Us</a> 

     </li> 
    </ul> 
    <div id="dropdown1"> 
     <ul> 
      <li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a> 

      </li> 
      <li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a> 

      </li> 
      <li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a> 

      </li> 
     </ul> 
    </div>

이 jQuery 라이브러리 파일을 포함 한 후 파일로 자바 스크립트 아래 또는 <script type="text/javascript"> code here</script> 내에서 추가합니다.

자바 스크립트 다음 show 및 hide 방법은 display CSS 속성 I를 조작하기 때문에

이

// 또한 자바 스크립트

$(document).ready(function() { 

    //select learners and apply mouseover event 
    $('.hover-learners').on('mouseover', function() { 
     $('#dropdown1').show(); 
    }); 

    //select learners and apply mouseout event 
    $('.hover-learners').on('mouseout', function() { 
     $('#dropdown1').hide(); 
    }); 

});

을 실행하기 전에 페이지가 완전히로드를 만들기 위해 jQuery의 준비 기능의 모든 것을 포장 추가됨

CSS :

#dropdown1 { 
    display:none; 
}

여기에 #dropdown1

근무 데모에서 인라인 style="visibility:hidden"를 제거 : 당신은 가장 중요한 부분을 놓치고 http://jsfiddle.net/robschmuecker/J6U7d/

출처

2014-07-19 17:26:15

그러나 jquery-1.11.1.js 파일에는 이러한 함수가 있습니다. 함수 showHide (요소보기) { \t VAR 디스플레이 ELEM, 숨겨진 \t \t 값 = [], \t \t 인덱스 = 0, \t \t 길이 = elements.length; 여기서 함수의 시작이다 \t for (; index Rod

양식 태그를 페이지에 넣고 모든 코드, 특히 양식 태그 내에 JavaScript/jQuery를 사용하는 코드를 넣어야하는지 궁금합니다. 내가 아는 빨대에서 그림을 그리 겠지만, 난 정말 곤란하다. – Rod

양식 태그가 반드시 필요한 것은 아닙니다. 답변을 업데이트했습니다. –

jQuery 함수 showHide()가 정의되지 않은 이유는 무엇입니까?

관련 문제