怎么分析这段代码,点击2次添加类,点击一次删除类

怎么分析这段代码,点击2次添加类,点击一次删除类

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>通过函数设置样式</title>

    <script src="jquery-1.12.4.js"></script>

  <style>

  .c{width: 200px;height: 200px;background-color: red;}

  </style>

  </head>

  <body>

    <div></div>

  <button>1</button>

    <script>

        var count = 0;

$("button").click(function (){

$("div").toggleClass("c",++count % 3 === 0);

});

    </script>

  </body>

</html>

我分析++i第一次值是1,转换为true,应该是点击一次就添加类;第二次值是2,转换为true,效果不变;第三次值是0,转换为false。所以分析结果是点击一次添加类,点击2次删除类。为什么与测试结果刚好相反?而且实际效果是第一次添加类需要3次点击才行,为啥?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,%是取余数,不是取商。例如1除以3的商是0,余数是1,那么1%3=1 。可以看下图的执行过程:

http://img1.sycdn.imooc.com//climg/5e1fc84009d7004706800351.jpg

可以再测试理解下,如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 迷失的小麦 提问者 #1
    老师,是不是反了,0代表false,其他数字代表true,而true是添加类,false是移除类。第一次是1,判断为true,所以是添加类。也就是说第一次添加类,第三次0是删除类,全都反了
    2020-01-16 13:43:22
好帮手慕星星 2020-01-16 16:12:45

同学你好,不是单独对数值进行判断的,是数值和后面0进行判断

http://img1.sycdn.imooc.com//climg/5e1ffb2d0917d92a01710039.jpg

第一次计算结果是1,1与0不相等,返回值为false,所以不会没有效果,也不会添加类。

第三次计算结果是0,0与0相等,返回值是true,会添加类。

可以再理解下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师