使用onclick调用的函数切换文本

Toggle text with function called with onclick

本文关键字：文本 函数 onclick 调用 使用      更新时间：2023-09-26

我的问题很短，但我自己无法解决。我有一个类似->的函数http://jsfiddle.net/gtU56/。我在html代码中调用一个带有事件监听器（onclick）的javascript函数。函数本身比较复杂，但我需要最后一段代码。单击"显示更多"，文本应该会发生更改。为什么正文不改？

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

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

要么有这里的功能http://jsfiddle.net/gtU56/2/

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

如果您想让它等待ready状态，您可以执行以下操作并一起删除onclick操作

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

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

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

在这里检查http://jsfiddle.net/gtU56/3/

这是因为加载函数的方式。将其从onLoad切换到no wrap（head），效果良好。

jsFiddle示例

使用jsFiddle的onLoad将函数封装在一个窗口中

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

虽然没有包裹（头）只是像这样正常添加：

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

由于您已经声称拥有jquery，因此不需要使用内联javascript。试试这个

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

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

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

​Js Fiddle

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

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

希望这能有所帮助！

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

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

否则，您访问的是未完全加载的html文档。

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

这应该对你有用：

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

非常简单。您可以使用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>
相关文章：