미니 jQuery 스크립트는 내용을 바꾸지 않고 div를 사라지게합니다.

Question

Javascript 및 jQuery로 시작하기 때문에 정말 바보 같은 질문 인 경우 화를 내지 마십시오. 우리는 toggle 함수를 바인딩하여 div의 내용을 대체해야하지만, 실행하면 div 전체가 "축소"됩니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 미니 스크립트는 (임의의 두 상태 사이를 전환하지 않습니다,

function highlight(evt){ 
    $('#evtTarget').toggleClass('highlighted'); 
} 

function func_1(evt){ 
    $('#evtTarget').html("CLICK!!"); 
} 

function func_2(evt){ 
    $('#evtTarget').html("CLACK!!"); 
} 

$(function(){ 
    $('#evtTarget').hover(highlight,highlight); 
    $('#evtTarget').toggle(func_1,func_2); 
}); 

Answer 1

toggle 쇼 또는 요소를 숨 깁니다 업데이트 : @sberry이 감동적인에서 지적, 그것은 당신이 의도 한 방식으로 작동하는 데 사용 버전 1.8까지).

function 인수를 사용하여 호출하면 (문서 사용에 대한 유효한 인수가 아닌) 인수없이 호출 된 것처럼 동작합니다 (예 : 숨김 인 경우 표시). , 보이면 숨 깁니다). div가 처음부터 표시 되었기 때문에 div가 숨겨졌습니다.

Answer 2

당신이하려는 것은 document.ready에서 토글을 사용하는 것입니다 .... 토글 .. div가 숨겨져 있다면 숨긴다 ... 그래서 이제 evtTarget이 document.ready에 표시되고 따라서 토글 기능은 ... 그것을 숨 깁니다 (다른 이벤트가 보여 전환을 호출하지에 숨겨진 DIV 다시)

당신이 필요로하는 클릭과 같은 전환에 대한 이벤트, 또는 어떤 경우 ....

$(function(){ 
    $('#someDiv').click(function(){ 
     $('#evtTarget').toggle(func_1,func_2); 
    }); 
}); 

를 가져 또는 keup

Answer 3

토글 문서의 경우이 부분을 참조하십시오.

http://api.jquery.com/toggle/

호버 (hover)의 내용을 바꾸려면 다음 코드로 바꾸십시오.

function onhover(evt){ 
$('#evtTarget').toggleClass('highlighted'); 
$('#evtTarget').html("hover in!!"); 
} 


function onhoverout(evt){ 
$('#evtTarget').toggleClass('highlighted'); 
$('#evtTarget').html("hover out!!"); 
} 

$(function(){ 
    $('#evtTarget').hover(onhover,onhoverout); 
//below toggle is not suggested to use like this. 
    $('#evtTarget').toggle(func_1,func_2); 
}); 

' 메신저 잘못된 경우가 helps.correct 바랍니다. http://jsfiddle.net/NZjvJ/3/

.toggle() 쇼/소자가 숨겨 :

Answer 4

여기에 고정 된 버전이다. 나는 그것이 당신이 원하는 것이라고 생각하지 않습니다. 여기 http://api.jquery.com/toggle-event/

설명 된 기능은 현재 show() 및 hide() 사이를 전환하는 기능으로 대체되었습니다로

function highlight(evt){ 
    $('#evtTarget').toggleClass('highlighted'); 
} 

function func_1(evt){ 
    if($('#evtTarget').html() !== 'CLICK!!') $('#evtTarget').html("CLICK!!"); 
    else $('#evtTarget').html("CLACK!!"); 
} 

$(function(){ 
    $('#evtTarget').hover(highlight,highlight); 
    $('#evtTarget').click(func_1); 
}); 

Answer 5

사용하려는 toggle() 기능을 사용합니다.

이

function highlight(evt){ 
    $('#evtTarget').toggleClass('highlighted'); 
} 
function func_1(evt){ 
    $('#evtTarget').html("CLICK!!"); 
    $('#evtTarget').unbind('click',func_1); 
    $('#evtTarget').click(func_2); 
} 

function func_2(evt){ 
    $('#evtTarget').html("CLACK!!"); 
    $('#evtTarget').unbind('click',func_2); 
    $('#evtTarget').click(func_1); 
} 
$('#evtTarget').hover(highlight,highlight); 
$('#evtTarget').click(func_1);