迷你jQuery脚本让div消失而不是替换它的内容

我刚刚开始使用Javascript和jQuery，所以不要生气，如果这是一个非常愚蠢的问题。我们应该通过绑定toggle函数替换div的内容，但是当我运行它时，整个div“收缩”。我究竟做错了什么？迷你脚本迷你jQuery脚本让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); 
});

来源

2013-03-22 RubenGeert

http://jsfiddle.net/NZjvJ/2 – stackunderflow 2013-03-22 05:28:16

'toggle'，你要使用它的方式，已被废弃在1.8和去除在1.9。这是一个使用1.7的小提琴，可以工作。 http://jsfiddle.net/hhwmW/。请参阅本页面的注意事项：http://api.jquery.com/toggle-event/ – sberry 2013-03-22 05:30:57

我看到，该课程基于jQuery 1.3，之前在属性过滤器中缺少引号导致了麻烦。 – RubenGeert 2013-03-22 05:35:23

toggle显示或隐藏的元素，它不会任意两个状态之间切换（更新：作为@sberry在评析指出，它使用的行为您预期的方式在版本高达1.8）。

当您使用function参数（其中，作为文档显示，它不是任何用例的有效参数）调用它时，它的行为就好像它没有参数调用一样（即显示它是否隐藏，如果显示则隐藏）。由于div在开始时是可见的，所以它们隐藏起来。

来源

2013-03-22 05:27:18 mgibsonbr

你在做什么是使用切换在document.ready ....切换..显示div如果隐藏其他隐藏它...所以现在我打赌你的evtTarget是可见的document.ready，因此切换功能隐藏它......（没有其他事件调用切换显示隐藏格设置再次）

你需要的是像点击触发的事件，或悬停或Keup酒店无论如何....

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

来源

2013-03-22 05:27:47 bipen

@bipen不downvoter，但我相信你的答案确实是不正确的。 OP需要一个被弃用的行为（即“切换按钮”或“复选框”），而不是显示/隐藏行为。在'click'回调中调用当前的'toggle'将无法实现该功能，而旧的''在document.ready'中可以正常工作。 – mgibsonbr 2013-03-22 05:39:14

好的谢谢... :) ..我会删除这个然后.. – bipen 2013-03-22 05:40:22

@mgibsonbr不，OP（我）想弄清楚他误解了什么。主要的问题似乎是我的课程使用jQuery 1.3，而我在jQuery 1.9上。 – RubenGeert 2013-03-22 05:43:04

请参阅此处获取切换文档：

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-22 05:32:47 Sangeeta

这里的一个固定的版本：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-22 05:33:23 stackunderflow

还不熟悉jsFiddle，但它似乎真的很方便。 Thx指出了这一点！ – RubenGeert 2013-03-22 05:45:04

您希望使用的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-22 05:38:53 GoldenStake

我发现有点混乱......你在'func_1'的定义中调用'func_1'？这有点像循环引用吗？ – RubenGeert 2013-03-22 05:49:30

@RubenGeert我的代码可以代替你的例子。我正在做的是通过解除自身作为事件来复制切换功能，并重新绑定其他功能。 – GoldenStake 2013-03-22 05:55:40

我明白了，你是对的，它是有效的。这对我来说看起来有点奇怪。 – RubenGeert 2013-03-22 06:04:04

迷你jQuery脚本让div消失而不是替换它的内容

回答

相关问题