关于视频中的一句代码

来源:4-2 CSS动画-命名约定以及测试脚本

weixin_慕的地5241954

2019-09-11 20:51:42

var isSetAnimateClass = false;
if(isSetAnimateClass === false){
            for (var i = 0;i < animateElements.length;i++){
                var element = document.querySelector(animateElements[i]);
                //console.log(element)
                var baseCls = element.getAttribute('class');
                //console.log(baseCls)
                element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init');
                //setAttribute这里的tt写成tr了,要注意,写错好几次了
                isSetAnimateClass = true;
                return ;
            }
        }

var isSetAnimateClass = false;    // 是否设置动画初始化样式

if(isSetAnimateClass === false)

这两句浏览器是如何判断它的布尔值的?  不明白,最好能结合例子解释详细点,谢谢。

写回答

3回答

好帮手慕星星

2019-09-14

同学你好,

1、这三个if判断中并没有return返回内容,return后面是空的:

http://img.mukewang.com/climg/5d7ca32a09c6515504230249.jpg

也就是无返回值,也可以起到结束代码的作用。setAttribute方法也没有返回值,所以不知道同学说的返回值指的是哪里。这行代码:

element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); 

只是将原来的类名加上修改之后的类名重新设置给元素。

2、for循环没有返回值的哦。遍历animateElements数组,可以在数组中每一个元素上设置类,不只是最后一项。

自己可以测试理解下,祝学习愉快!

0

好帮手慕慕子

2019-09-12

同学你好, 

  1. 是的, 是可以使用同学写的方法替代的,

  2. 修改之后,元素的类名是原来的类名加上修改之后的类名。 关于三段代码可以参考下图注释理解

    http://img.mukewang.com/climg/5d7a1877093557a513370851.jpg

这一部分的逻辑可能会有些复杂, 同学可以多看几遍视频, 跟着视频写一写代码, 根据代码实现的效果帮助自己更好的理解哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

0
heixin_慕的地5241954
h 1、返回的值还有element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); 这个返回值只是修改后的类名。 2、因为我看见每段都取了element 这个遍历数组虽然把数组所有内容都设置为init状态,但是我记得for循环返回的值是数组的最后一项啊,所以应该只有最后一项有点击效果啊,能解释一下吗?第二个问题能解释一下吗?
h019-09-12
共1条回复

好帮手慕慕子

2019-09-12

同学你好,首选, 我们要了解, js语法规定, 通过运算符(===)判断左右符号左右两边的值是否相等, 如果相等返回true, 不行等返回false。

然后,我们来分析同学粘贴的这两句代码

  1. var isSetAnimateClass = false;    这句代码是将isSetAnimateClass的值设置为布尔值false

  2. if语句中的isSetAnimateClass === false 这句代码是通过等于运算符(===)判断isSetAnimateClass 是否等于false,

    (1)如果isSetAnimateClass 的值false, 两边的值相等, 那么最终返回的结果就是true,  执行if后面花括号中的代码

    (2)如果isSetAnimateClass 的值true,   两边的值不相等, 那么最终返回的结果就是false, 跳过if后面花括号的代码。

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

0
heixin_慕的地5241954
h 1、是不是var isSetAnimateClass = 1,if(isSetAnimateClass === 1),isSetAnimateClass != 1; return ; 来代替呢?因为都是需要布尔值来判断 2、 screen.onclick = function (){ if(isSetAnimateClass === false){ for (var i = 0;i < animateElements.length;i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); } isSetAnimateClass = true; return ; } if(isAnimateDone === false){ for (var i = 0;i < animateElements.length;i++){ var element = document.querySelector(animateElements[i]); var baseCls = element.getAttribute('class'); element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); } isAnimateDone = true; return ; } 这3段代码,第一段if()为真,执行{}里的代码,返回isSetAnimateClass = true;再判断第一段if()为假,执行下一段代码。返回的值还有element.setAttribute('class',baseCls +' '+animateElements[i].substr(1)+'_animate_init'); 这个返回值是element+修改后的类名吗,还是只是返回修改后的类名?因为我看见每段都取了element 这个遍历数组虽然把数组所有内容都设置为init状态,但是我记得for循环返回的值是数组的最后一项啊,所以应该只有最后一项有点击效果啊,能解释一下吗?
h019-09-12
共1条回复

0 学习 · 40143 问题

查看课程