3回答

好帮手慕慕子

2019-04-05

已采纳

同学你好， 这里可以这样理解。

1. screenAnimatedone('.screen-2')这个函数比在onload函数中调用的screenAnimateInit()先执行，所以打印不出class新值。 示例： 在onload函数中添加一句测试代码console.log(1)

   

   效果图：

   

   从打印结果可以看出1在最后才打印出来， 所以screenAnimatedone在screenAnimateInit之后执行

2. 在onload函数中调用screenAnimatedone. 示例： 

   

   效果图：

   
   

   此时可以打印出class新值

如果还有疑问可以在问答区继续提问，我们会继续为你解答的

如果帮助到了 欢迎采纳

祝学习愉快~~~

0

hC陈十一

h 哦~懂了，谢谢老师！假期了还抽空回答我的问题，太感谢了

h019-04-05

共1条回复

CC陈十一

提问者

2019-04-04

var getEle=function(idx){
	return document.querySelector(idx);
}
var getEles=function(idx){
	return document.querySelectorAll(idx);
}
var getClass=function(element){
	return element.getAttribute('class');
}
var setClass=function(element,newclass){
    return element.setAttribute('class',newclass)
}
var addClass=function(element,newclass){
	var base=getClass(element);
	return setClass(element,base+' '+newclass);
}
var screenAnimateElements={
	'.header':[
		'.header__logo',
		'.header__nav'
	],
	'.screen-1':[
		'.screen-1__heading',
		'.screen-1__subheading'
	],
	'.screen-2':[
		'.screen-2__heading',
		'.screen-2__line',
		'.screen-2__subheading',
		'.screen-2__picture-2',
		'.screen-2__picture-3'
	],
	'.screen-3':[
		'.screen-3__wrap',
		'.screen-3__heading',
		'.screen-3__line',
		'.screen-3__lang',
		'.screen-3__subheading',
		'.screen-3__lang-item-1',
		'.screen-3__lang-item-2',
		'.screen-3__lang-item-3',
		'.screen-3__lang-item-4',
		'.screen-3__lang-item-5'
	],
	'.screen-4':[
		'.screen-4__heading',
		'.screen-4__line',
		'.screen-4__subheading',
		'.screen-4__wrap__item-1',
		'.screen-4__wrap__item-2',
		'.screen-4__wrap__item-3',
		'.screen-4__wrap__item-4'
	],
	'.screen-5':[
		'.screen-5__heading',
		'.screen-5__line',
		'.screen-5__subheading',
		'.screen-5__picture'
	]
};

// 使所有元素初始化函数
var screenAnimateInit=function(selector){                                       
	var screen=getEle(selector);
	var animateScreen=screenAnimateElements[selector];
	for(var i=0;i<animateScreen.length;i++){
		var elements=getEle(animateScreen[i]);
		addClass(elements,animateScreen[i].substr(1)+'_animate_init')   
	}
}

window.onload=function(){
	for(k in screenAnimateElements){
	    screenAnimateInit(k);
	    if(k==='.screen-1'){
	    	continue;
    	}
    }
}

// 播放动画函数
var screenAnimatedone=function(selector){                                       
	// var screen=getEle(selector);
	var screen =document.querySelector(selector);
	var animateScreen=screenAnimateElements[selector];
	for(var i=0;i<animateScreen.length;i++){
		// var element=getEle(animateScreen[i]);
		var elements=document.querySelector(animateScreen[i]);
		console.log(elements);
		// var base=element.getAttribute('class');
		var baseCls=elements.getAttribute('class');
        console.log(baseCls);
		elements.setAttribute('class',baseCls.replace('_animate_init','_animate_done')); 
	}
}
screenAnimatedone('.screen-2');

0

好帮手慕慕子

2019-04-04

同学你好， 这里可以在集合变化后， 重新再获取一次集合，此时就可以获取到class的新值了。

示例: 

同学下去可以根据这个思路修改自己的代码哦， 也可以回顾一下老师的视频，加深自己的理解

如果还有问题， 建议：同学将自己的完整代码粘贴过来， 或者以作业的形式提交， 便于准确的定位和解决问题

如果帮助到了你， 欢迎采纳

祝学习愉快~~~~

0

hC陈十一

h 老师，不好意思啊，还是不行= =。我把js代码贴上来了，放到我原来的代码中就行了，原来的代码就在上面的网址里，麻烦老师了！！！！！

h019-04-04

共1条回复