javascript - 关于JS setTimeout与removeClass的问题，求大神帮看看！-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 关于JS setTimeout与removeClass的问题，求大神帮看看！

迷茫 2017-04-10 16:12:40

[JavaScript讨论组]

702

我想实现的效果是，点击按钮，给指定的p添加 className 等待3秒后删除给这个p添加的className ；
我写的代码，老是提示我Uncaught TypeError: undefined is not a function
下面是我的代码，请大神帮忙看看我哪里写错了，谢谢哈；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>animate.css动画演示_dowebok</title>
<link rel="stylesheet" href="animate.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok{
    width: 400px;
    height: 500px;
    background-color: #998822;
    margin: 100px 0px 0px 200px;
}

</style>
<script>
function getop(){
    var op = document.getElementById('dowebok');
    var Bat_1 = document.getElementById('Bas');
    op.className = 'animated bounce';
    setTimeout(function(){
            op.removeClass('animated bounce');
        },3000);
}
</script>
</head>

<body>
<input type="button" value="演示动画" id="Bas" onclick="getop()" />
<p id="dowebok">gggg</p>
</body>
</html>

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(2)

高洛峰2017-04-10 16:14:40 2楼

还不如直接用jQuery写，js不熟何必这么难受

赞 +0

添加回复

怪我咯2017-04-10 16:14:40 1楼

问题主要出在原生js没有removeClass这个方法。
最简单的办法就是直接设置className为删除后的样子，删除后class为空，因此

op.className = '';

也可以自己写2个函数，分别用于添加和删除class操作

/*
 *@id string 需要添加元素的id名
 *@classname string 需要被添加的类名
 *@return string 添加之后元素的类名
 */
function addClass(id, classname) {
    var obj = document.getElementById(id),
        classname_source = obj.className,
        classname_res = classname_source == '' ? classname : classname_source + ' ' + classname;

    obj.className = classname_res;

    return classname_res;
}

因为有朋友发现了bug，因此做了一些修正,只能删除单个class，删除多个时顺序必须一致才行

function removeClass(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        reg = new RegExp(' '+classname, 'g'),
        reg2 = new RegExp(classname+' ', 'g'),
        classname_res;
        if (classname_source.indexOf(classname) == 0) {
            classname_res = classname_source.replace(reg2, '');
            console.log(classname_source);
        } else {
            classname_res = classname_source == classname ? '' : classname_source.replace(reg, '');
        }

    obj.className = classname_res;
    return classname_res;
}

后来调整了思路，写了一个功能稍微强大一点的removeClass，可删除任意个数任意顺序的class，不同的class用空格隔开。

function removeClass2(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        arr_source = classname_source.split(' '),
        cur_source = classname.split(' '),
        res_source = [],

        len = arr_source.length;

    for(var i=0; i<len; i++) {
        if(!isArrEle(cur_source, arr_source[i])) {
            res_source.push(arr_source[i]);
        }
    }

    var classname_res = res_source.join(' ');
    obj.className = classname_res;
    return classname_res;
}

function isArrEle(arr, ele) {
    for(var item in arr) {
        if (arr[item] == ele) {
            return true;
        }
    }
    return false;
}

若发现bug，欢迎指正，相互学习，3Q.

有bug版 1.0

function removeClass(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        reg = new RegExp(' '+classname, 'g'),
        classname_res = classname_source == classname ? '' : classname_source.replace(reg, '');

    obj.className = classname_res;
    return classname_res;
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>