老师,你好关于获取元素问题,谢谢

老师,你好关于获取元素问题,谢谢

此方法可行:
// 获取元素
var getElement = function(selector){
    return document.querySelector(selector);
}
//强制定义动画效果
var screenAnimateElements = {
    //第一屏有动画的元素
    '.screen-1':[
        '.screen-1_wrap_heading',
        '.screen-1_wrap_subheading',
    ],
        
};

function setScreenAnimate(screenCls) {
    var screen = getElement(screenCls) ; //获取当前屏元素
    var animateElements =  screenAnimateElements[screenCls];  //需要设置动画的元素
    
    var isSetAnimateClass = false; // 是否有初始化子元素的样式

    var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE?
    

    screen.onclick = function(){

    //初始化样式
        if( isSetAnimateClass === false){
            //遍历每一屏需要设置动画的元素
            for(var i=0;i<animateElements.length;i++){
                //获取到某一屏的元素
                var element = document.querySelector(animateElements[i]);
                //获取到某一屏的元素的class
                var baseCls =  element.getAttribute('class');
                //创建新的calss(加入初始化状态),原来的class加上新设置的class名;substr:截取字符串(把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');
                //.replace:替换元素,把_animate_init替换成_animate_done
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
            }
          
       }
    }
}

setScreenAnimate('.screen-1');

按老师写的为什么会报错

var screenAnimateElements = {
    //第一屏有动画的元素
    '.screen-1':[
        '.screen-1_wrap_heading',
        '.screen-1_wrap_subheading',
    ],
        
};

function setScreenAnimate(screenCls) {
    var screen = getElement(screenCls) ; //获取当前屏元素
    var screen = document.querySelector(screenCls);  //需要设置动画的元素
    
    var isSetAnimateClass = false; // 是否有初始化子元素的样式

    var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE?
    

    screen.onclick = function(){

    //初始化样式
        if( isSetAnimateClass === false){
            //遍历每一屏需要设置动画的元素
            for(var i=0;i<animateElements.length;i++){
                //获取到某一屏的元素
                var element = document.querySelector(animateElements[i]);
                //获取到某一屏的元素的class
                var baseCls =  element.getAttribute('class');
                //创建新的calss(加入初始化状态),原来的class加上新设置的class名;substr:截取字符串(把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');
                //.replace:替换元素,把_animate_init替换成_animate_done
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
            }
          
       }
    }
}

setScreenAnimate('.screen-1');


// 获取元素
var getElement = function(selector){
    return document.querySelector(selector);
}
var screen = getElement(screenCls) ; //获取当前屏元素
和
var screen = document.querySelector(screenCls);有什么不同,谢谢。



正在回答 回答被采纳积分+1

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

2回答
提问者 qq_慕移动3101913 2019-10-09 22:05:40

。。。。。。

提问者 qq_慕移动3101913 2019-10-09 22:02:23

提问代码写错,请勿作答谢谢。

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

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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