首页 > 解决方案 > jQuery变量和函数具有相同的名称

问题描述

我在下面的 jQuery 脚本中有一个名为 toggleBool 的变量和一个名为 toggleBool 的函数。

它可以工作,除了变量 toggleBool 不会在每次单击调用 toggleBool() 的按钮时在 true 和 false 之间改变。如果我将变量名称更改为例如 toggleBoolean,那么一切正常。另外,我正在使用 alert() 进行跟踪。是否有允许我在 jQuery 或 javascript 中插入断点的工具?

    	toggleBool = false;
    	iter_n = 0;
    	jQuery('#pResult').css(
    		{	'font-size'		:	'20px',
    			'background-color'	:	"#fff8dc"	,
    		})
    	$('#clickMe').css(
    		{	"background-color"	:	"#e9ffdb",	
    			"font-size"		:	"30px",
    			"font-family"		:	"Courier",
    			"font-style"		:	"italic",
    		})
    	jQuery('#clickMe').click(function()
    	{
    		toggleBool();
    		if (toggleBool == true)
    			$('#fColor').css('color', 'magenta');
    		else
    			$('#fColor').css('color', 'blue');
    		$('#pResult').html('You just clicked the event button ' + iter_n + '-th time!')
    		function	toggleBool()
    		{
    			iter_n++;
    			toggleBool = !toggleBool;
    		}
    	})
    	
    	<button	id='clickMe'>Click the button to toggle color</button>
    	<h2 align=center>
    	<p>There are so many <span id='fColor' style="color:blue">colorful</span> flowers.</p>
    	</h2>
    	<p align=center id='pResult'> This is the default paragraph before click event. </p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

标签: jquery

解决方案


在 Chrome 中调试按 F12 并打开调试窗口。

在行上放一个断点

iter_n = 0;

并在控制台中输入 toggleBool,您将看到一个布尔值被打印出来。

然后在clickme函数里面放一个断点就行了

if (toggleBool == true)

并在控制台中输入 toggleBool ,您将看到一个函数被打印出来。

您需要了解变量的范围,并且 toggleBool 将范围从函数外部的全局变量和进入 clickme 函数后的函数更改。


推荐阅读