1

我刚刚开始使用 Javascript 和 jQuery，所以如果这是一个非常愚蠢的问题，请不要生气。我们应该div通过绑定一个toggle函数来替换 a 的内容，但是当我运行它时，整个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);
});
4

5 回答 5

1

toggle显示或隐藏元素，它不会在两种任意状态之间切换（更新：正如@sberry 在评论中指出的那样，它曾经在最高 1.8 的版本中表现得像你想要的那样）。

当您使用function参数调用它时（如文档所示，它对于任何一个用例都不是有效参数），它的行为就像在没有参数的情况下调用它一样（即显示是否隐藏，如果显示则隐藏）。由于 div 在开始时是可见的，因此它们被隐藏了。

于 2013-03-22T05:27:18.043 回答
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);
});

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

于 2013-03-22T05:32:47.403 回答
1

这是一个固定版本：http: //jsfiddle.net/NZjvJ/3/

.toggle()显示/隐藏元素。我不认为那是你想要的。

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);
});
于 2013-03-22T05:33:23.323 回答
1

toggle()您希望使用的功能已被弃用，如此处所述http://api.jquery.com/toggle-event/

该功能现在已替换为在show()和之间切换的功能hide()。http://api.jquery.com/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);
于 2013-03-22T05:38:53.260 回答
0

你想做的是在 document.ready 中使用切换..切换..如果隐藏则显示 div 否则隐藏它...所以现在我敢打赌你的 evtTarget 在 document.ready 上是可见的，因此切换功能隐藏了它...（没有其他事件调用切换来再次显示隐藏的 div）

您需要的是一个用于切换的事件，例如单击、悬停或保持任何事件....

$(function(){
   $('#someDiv').click(function(){
      $('#evtTarget').toggle(func_1,func_2);
   });
});
于 2013-03-22T05:27:47.157 回答