Question

我的问题很简短，但我自己无法弄明白。我有一个像 - ＆gt;这样的功能http://jsfiddle.net/gtU56/。我在我的html代码中调用了一个带有事件监听器（onclick）的javascript函数。函数本身更复杂，但我需要最后一段代码。通过单击“显示更多”，文本应该更改。为什么文本不会改变？

Answer 1

因为在呈现html代码时toggleText函数不可用。

换句话说，在页面准备好之前不会设置该函数，因此onclick函数不会引用任何内容。

要么具有像http://jsfiddle.net/gtU56/2/

这样的功能

或将其放在页面的头部，因为它需要立即准备好

如果您希望它等待ready州，您可以执行以下操作并同时删除onclick操作

http://jsfiddle.net/gtU56/7/

$(".text").click(function()
{                     
   $(".text").toggle();
});

Answer 2

toggleText = function () {
    $('.text').toggle();
}

点击http://jsfiddle.net/gtU56/3/

Answer 3

这是因为你正在加载这个功能。将它从onLoad切换到没有换行（头），它工作正常。

<强> jsFiddle example

使用jsFiddle的onLoad将你的函数包装在window.onload调用中，如下所示：

<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]> 
</script>

虽然没有换行（head）只是像这样正常添加它：

<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]> 
</script>

Answer 4

由于您已声明拥有jquery，因此您无需使用内联JavaScript。试试这个

var elems = $('.text');
elems.click(function(){
  elems.toggle(); 
});

小提琴：http://jsfiddle.net/gtU56/5/

Answer 5

$('.text').click(function() {
  $('.text').toggle('slow', function() {
    // do your animation..
  });
});

Js Fiddle

Answer 6

这是解决方案 - http://jsfiddle.net/gtU56/6/

您需要首先确保在页面加载后注册该功能。然后，将click事件绑定到div。

希望这有帮助！

Answer 7

首先，您应该像这样组织jQuery代码：

$.(document).ready(function() {
// enter jQuery code here
});

否则你正在访问一个未完全加载的html文档。

此外，如果您使用的是jQuery，则不需要事件监听器。

这应该适合你：

$.(document).ready(function() {
   $('.text').click(function() {
      $(this).toggle();
   });
});

Answer 8

很容易。您可以使用ID或CLASS。

onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"


<div>
    <div class="text" onclick="$('.text2').toggle(400);">Show More</div>
    <div class="text2" style="display:none">Show Less</div>
</div>

使用onclick调用函数切换文本

8 个答案: