jquery - 迷你 jQuery 脚本使 div 消失而不是替换其内容

Question

我刚刚开始使用 Javascript 和 jQuery，所以如果这是一个非常愚蠢的问题，请不要生气。我们应该通过绑定(bind)一个 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

请参阅切换文档:

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

如果您想替换悬停时的内容..您应该用下面的代码替换您的行；

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);
});

'希望有帮助。如果我错了，请纠正。