搜索
搜索

Javascript：element.classList.add("none") 工作不正常

Shubham Garg 发表于 Dev
40
舒巴姆·加格

编辑：对不起。这只是代码中的一个输入错误。

Codepen 链接： https ://codepen.io/xshubhamx/pen/NWjGmvL

问题介绍：

我只是想创建 4 个按钮，在单击时显示一些内容，而其他按钮的内容保持隐藏。但这里的问题是当我点击最后两个按钮中的任何一个时，它们的内容会显示，但是如果我点击前两个按钮中的任何一个，最后两个选项的内容不会消失。

如果我按按钮出现在网页上的顺序单击它们，它就可以正常工作。

需要帮助！

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
        

    <div class="options">
        <button class="op1" onclick="clicked1()">
            Meaning
        </button>
        <button class="op2" onclick="clicked2()">
            Usage
        </button>
        <br>
        <button class="op3" onclick="clicked3()">
            Implementation
        </button>
        <button class="op4" onclick="clicked4()">
            Examples
        </button>
    </div>


    <div class="content">
        <div class="meaning none animate__animated" id="meaning">
            <div class="heading animate__animated" id="mh">
                Meaning:
            </div>
            <br><br>
            <div class="definition animate__animated" id="md">
                In computer science, a data structure is a data organization, management, and storage format that
                enables efficient access and modification.More precisely, a data structure is a collection of data
                values, the relationships among them, and the functions or operations that can be applied to the data,
                i.e., it is an algebraic structure about data.
            </div>
        </div>

        <div class="usage none animate__animated" id=usage>
            <div class="heading animate__animated" id="uh">
                Usage:
            </div>
            <br><br>
            <div class="definition animate__animated" id="ud">
                Data structures serve as the basis for abstract data types (ADT). The ADT defines the logical form of
                the data type. The data structure implements the physical form of the data type.

                Different types of data structures are suited to different kinds of applications, and some are highly
                specialized to specific tasks. For example, relational databases commonly use B-tree indexes for data
                retrieval, while compiler implementations usually use hash tables to look up identifiers.

                Data structures provide a means to manage large amounts of data efficiently for uses such as large
                databases and internet indexing services. Usually, efficient data structures are key to designing
                efficient algorithms. Some formal design methods and programming languages emphasize data structures,
                rather than algorithms, as the key organizing factor in software design. Data structures can be used to
                organize the storage and retrieval of information stored in both main memory and secondary memory.
            </div>
        </div>




        <div class="implementation none animate__animated" id="implementation">
            <div class="heading animate__animated" id="ih">
                Implementation:
            </div>
            <br><br>
            <div class="definition animate__animated" id="id">
                Data structures are generally based on the ability of a computer to fetch and store data at any place in
                its memory, specified by a pointer—a bit string, representing a memory address, that can be itself
                stored in memory and manipulated by the program. Thus, the array and record data structures are based on
                computing the addresses of data items with arithmetic operations, while the linked data structures are
                based on storing addresses of data items within the structure itself.

                The implementation of a data structure usually requires writing a set of procedures that create and
                manipulate instances of that structure. The efficiency of a data structure cannot be analyzed separately
                from those operations. This observation motivates the theoretical concept of an abstract data type, a
                data structure that is defined indirectly by the operations that may be performed on it, and the
                mathematical properties of those operations (including their space and time cost).
            </div>
        </div>



        <div class="examples none animate__animated" id="examples">
            <div class="heading animate__animated" id="eh">
                Examples:
            </div>
            <br><br>
            <div class="definition animate__animated" id="ed">

                <li>
                    There are numerous types of data structures, generally built upon simpler primitive data types:
                </li>
                <li>
                    An array is a number of elements in a specific order, typically all of the same type (depending on
                    the language, individual elements may either all be forced to be the same type, or may be of almost
                    any type). Elements are accessed using an integer index to specify which element is required.
                    Typical implementations allocate contiguous memory words for the elements of arrays (but this is not
                    always a necessity). Arrays may be fixed-length or resizable.
                </li>
                <li>
                    A linked list (also just called list) is a linear collection of data elements of any type, called
                    nodes, where each node has itself a value, and points to the next node in the linked list. The
                    principal advantage of a linked list over an array is that values can always be efficiently inserted
                    and removed without relocating the rest of the list.
                    Certain other operations, such as random access to a certain element, are however slower on lists
                    than on arrays.
                </li>
                <li>
                    A record (also called tuple or struct) is an aggregate data structure. A record is a value that
                    contains other values, typically in fixed number and sequence and typically indexed by names. The
                    elements of records are usually called fields or members.
                </li>
                <li>
                    A union is a data structure that specifies which of a number of permitted primitive types may be
                    stored in its instances, e.g. float or long integer. Contrast with a record, which could be defined
                    to contain a float and an integer; whereas in a union, there is only one value at a time. Enough
                    space is allocated to contain the widest member datatype.
                </li>
                <li>
                    A tagged union (also called variant, variant record, discriminated union, or disjoint union)
                    contains an additional field indicating its current type, for enhanced type safety.
                </li>
                <li>
                    An object is a data structure that contains data fields, like a record does, as well as various
                    methods which operate on the data contents. An object is an in-memory instance of a class from a
                    taxonomy. In the context of object-oriented programming, records are known as plain old data
                    structures to distinguish them from objects.[11]
                    In addition, graphs and binary trees are other commonly used data structures.
                </li>
                <li>
                    In addition, graphs and binary trees are other commonly used data structures.
                </li>
            </div>
        </div>
    </div>
</body>

</html>

CSS：

.heading{
    font-size: 25px;
    padding: 5px;
    background-color: aqua;
    float: left;
}

.definition{
    padding: 20px;
    font-size: 20px;
    background-color: blanchedalmond;
}
.meaning,.usage,.implementation,.examples{
    margin: 85px;
    background-color: lightgreen;
}
html{
    /* filter: invert(1); */
    background-color: white;
}

.options{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

button{
    height: 70px;
    width: 150px;
    margin: 10px;
    background-color: cyan;
}

button:hover{
    background-color: chartreuse;
    cursor: pointer ;
}

.none{
    display: none !important;
}





:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


@-webkit-keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight
}



@-webkit-keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft
}

JS：

// const e1=document.getElementById("meaning");
// const e2=document.getElementById("usage");
// const e3=document.getElementById("implementation");
// const e4=document.getElementById("none");
function clicked1(){
    document.getElementById("meaning").classList.remove("none");
    document.getElementById("mh").classList.add("animate__backInLeft");
    document.getElementById("md").classList.add("animate__backInRight");
    document.getElementById("usage").classList.add("none");
    document.getElementById("implementaion").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked2(){
    document.getElementById("usage").classList.remove("none");
    document.getElementById("uh").classList.add("animate__backInLeft");
    document.getElementById("ud").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("implementaion").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked3(){
    document.getElementById("implementation").classList.remove("none");
    document.getElementById("ih").classList.add("animate__backInLeft");
    document.getElementById("id").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("usage").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked4(){
    document.getElementById("examples").classList.remove("none");
    document.getElementById("eh").classList.add("animate__backInLeft");
    document.getElementById("ed").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("usage").classList.add("none");
    document.getElementById("implementation").classList.add("none");
}

单个 HTML 文件中的所有 3 个文件：（方便直接在 stackoverflow 上查看输出）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="ds.css">
    <script type="text/javascript" src="../script.js"></script>
    <link rel="stylesheet" type="text/css" href="subjects.css">
    <script src="ds.js"></script> -->
    <style>
        .heading{
    font-size: 25px;
    padding: 5px;
    background-color: aqua;
    float: left;
}

.definition{
    padding: 20px;
    font-size: 20px;
    background-color: blanchedalmond;
}
.meaning,.usage,.implementation,.examples{
    margin: 85px;
    background-color: lightgreen;
}
html{
    /* filter: invert(1); */
    background-color: white;
}

.options{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

button{
    height: 70px;
    width: 150px;
    margin: 10px;
    background-color: cyan;
}

button:hover{
    background-color: chartreuse;
    cursor: pointer ;
}

.none{
    display: none !important;
}





:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}


@-webkit-keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight
}



@-webkit-keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft
}

    </style>
    <script>
        // const e1=document.getElementById("meaning");
// const e2=document.getElementById("usage");
// const e3=document.getElementById("implementation");
// const e4=document.getElementById("none");
function clicked1(){
    document.getElementById("meaning").classList.remove("none");
    document.getElementById("mh").classList.add("animate__backInLeft");
    document.getElementById("md").classList.add("animate__backInRight");
    document.getElementById("usage").classList.add("none");
    document.getElementById("implementaion").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked2(){
    document.getElementById("usage").classList.remove("none");
    document.getElementById("uh").classList.add("animate__backInLeft");
    document.getElementById("ud").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("implementaion").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked3(){
    document.getElementById("implementation").classList.remove("none");
    document.getElementById("ih").classList.add("animate__backInLeft");
    document.getElementById("id").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("usage").classList.add("none");
    document.getElementById("examples").classList.add("none");
}
function clicked4(){
    document.getElementById("examples").classList.remove("none");
    document.getElementById("eh").classList.add("animate__backInLeft");
    document.getElementById("ed").classList.add("animate__backInRight");
    document.getElementById("meaning").classList.add("none");
    document.getElementById("usage").classList.add("none");
    document.getElementById("implementation").classList.add("none");
}
    </script>
</head>

<body>

    <div class="options">
        <button class="op1" onclick="clicked1()">
            Meaning
        </button>
        <button class="op2" onclick="clicked2()">
            Usage
        </button>
        <br>
        <button class="op3" onclick="clicked3()">
            Implementation
        </button>
        <button class="op4" onclick="clicked4()">
            Examples
        </button>
    </div>


    <div class="content">
        <div class="meaning none animate__animated" id="meaning">
            <div class="heading animate__animated" id="mh">
                Meaning:
            </div>
            <br><br>
            <div class="definition animate__animated" id="md">
                In computer science, a data structure is a data organization, management, and storage format that
                enables efficient access and modification.More precisely, a data structure is a collection of data
                values, the relationships among them, and the functions or operations that can be applied to the data,
                i.e., it is an algebraic structure about data.
            </div>
        </div>

        <div class="usage none animate__animated" id=usage>
            <div class="heading animate__animated" id="uh">
                Usage:
            </div>
            <br><br>
            <div class="definition animate__animated" id="ud">
                Data structures serve as the basis for abstract data types (ADT). The ADT defines the logical form of
                the data type. The data structure implements the physical form of the data type.

                Different types of data structures are suited to different kinds of applications, and some are highly
                specialized to specific tasks. For example, relational databases commonly use B-tree indexes for data
                retrieval, while compiler implementations usually use hash tables to look up identifiers.

                Data structures provide a means to manage large amounts of data efficiently for uses such as large
                databases and internet indexing services. Usually, efficient data structures are key to designing
                efficient algorithms. Some formal design methods and programming languages emphasize data structures,
                rather than algorithms, as the key organizing factor in software design. Data structures can be used to
                organize the storage and retrieval of information stored in both main memory and secondary memory.
            </div>
        </div>




        <div class="implementation none animate__animated" id="implementation">
            <div class="heading animate__animated" id="ih">
                Implementation:
            </div>
            <br><br>
            <div class="definition animate__animated" id="id">
                Data structures are generally based on the ability of a computer to fetch and store data at any place in
                its memory, specified by a pointer—a bit string, representing a memory address, that can be itself
                stored in memory and manipulated by the program. Thus, the array and record data structures are based on
                computing the addresses of data items with arithmetic operations, while the linked data structures are
                based on storing addresses of data items within the structure itself.

                The implementation of a data structure usually requires writing a set of procedures that create and
                manipulate instances of that structure. The efficiency of a data structure cannot be analyzed separately
                from those operations. This observation motivates the theoretical concept of an abstract data type, a
                data structure that is defined indirectly by the operations that may be performed on it, and the
                mathematical properties of those operations (including their space and time cost).
            </div>
        </div>



        <div class="examples none animate__animated" id="examples">
            <div class="heading animate__animated" id="eh">
                Examples:
            </div>
            <br><br>
            <div class="definition animate__animated" id="ed">

                <li>
                    There are numerous types of data structures, generally built upon simpler primitive data types:
                </li>
                <li>
                    An array is a number of elements in a specific order, typically all of the same type (depending on
                    the language, individual elements may either all be forced to be the same type, or may be of almost
                    any type). Elements are accessed using an integer index to specify which element is required.
                    Typical implementations allocate contiguous memory words for the elements of arrays (but this is not
                    always a necessity). Arrays may be fixed-length or resizable.
                </li>
                <li>
                    A linked list (also just called list) is a linear collection of data elements of any type, called
                    nodes, where each node has itself a value, and points to the next node in the linked list. The
                    principal advantage of a linked list over an array is that values can always be efficiently inserted
                    and removed without relocating the rest of the list.
                    Certain other operations, such as random access to a certain element, are however slower on lists
                    than on arrays.
                </li>
                <li>
                    A record (also called tuple or struct) is an aggregate data structure. A record is a value that
                    contains other values, typically in fixed number and sequence and typically indexed by names. The
                    elements of records are usually called fields or members.
                </li>
                <li>
                    A union is a data structure that specifies which of a number of permitted primitive types may be
                    stored in its instances, e.g. float or long integer. Contrast with a record, which could be defined
                    to contain a float and an integer; whereas in a union, there is only one value at a time. Enough
                    space is allocated to contain the widest member datatype.
                </li>
                <li>
                    A tagged union (also called variant, variant record, discriminated union, or disjoint union)
                    contains an additional field indicating its current type, for enhanced type safety.
                </li>
                <li>
                    An object is a data structure that contains data fields, like a record does, as well as various
                    methods which operate on the data contents. An object is an in-memory instance of a class from a
                    taxonomy. In the context of object-oriented programming, records are known as plain old data
                    structures to distinguish them from objects.[11]
                    In addition, graphs and binary trees are other commonly used data structures.
                </li>
                <li>
                    In addition, graphs and binary trees are other commonly used data structures.
                </li>
            </div>
        </div>
    </div>
</body>

</html>

概括：

这里的问题是，如果我点击第三个或第四个按钮，然后点击第一个或第二个按钮，那么即使我向所有其他按钮添加了名为 none 的类，前一个按钮也不会消失。知道如何解决这个问题吗？

我还尝试使用写为注释的变量 (e1,e2,e3,e4) 来避免写这么长的行，但这也不起作用。

图沙尔沙希

implementation前两个函数的拼写错误。为了避免这些东西，最好使用变量

const e1=document.getElementById("meaning");
 const e2=document.getElementById("usage");
 const e3=document.getElementById("implementation");
 const e4=document.getElementById("examples");
function clicked1(){
    e1.classList.remove("none");
    document.getElementById("mh").classList.add("animate__backInLeft");
    document.getElementById("md").classList.add("animate__backInRight");
    e2.classList.add("none");
    e3.classList.add("none");
    e4.classList.add("none");
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

JavaScript classList.add无法正常工作

jQuery addClass工作正常，但javascript classList.add工作异常

element.classList.toggle（）无法正常工作

JavaScript classList.remove无法正常工作

为什么我的 element.classList.add 工作但切换不起作用？

element.classList.contains（）在JavaScript中到底如何工作？

Javascript date.setSeconds在调试器中正常工作，但在脚本中工作不正常

Javascript Promise链执行不正常

JavaScript element.classList.add（“ fa fa-hand-rock-o”）错误：“字符串包含无效字符”

当javascript中的element.classList.add()方法添加新类时，无法使用DOM操作对元素进行样式设置

我在Javascript中有一个下拉菜单，但在chrome中工作正常，但在Firefox中工作不正常

cron工作不正常

lset 工作不正常

ViewPager 工作不正常

路线工作不正常

TabIndex工作不正常

发现工作不正常

硬盘工作不正常

清除element.classList

我的JavaScript倒数计时器运作不正常

为什么我的 javascript 代码运行不正常？

生成的JavaScript函数中的变量表现不正常

Javascript筛选器功能，表现不正常

nativeElement.classList.add（）替代

Javascript XMLHTTPRequest .classList 响应

classList的JavaScript问题

使用element.classList.add（）不能立即从服务中更新视图

classList.remove 不能正常工作？

classList.toggle（'class'，true）与classList.add

TOP 榜单

  1. 1

    Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用

  2. 2

    使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中

  3. 3

    SQL Server中的非确定性数据类型

  4. 4

    Swift 2.1-对单个单元格使用UITableView

  5. 5

    如何避免每次重新编译所有文件？

  6. 6

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  7. 7

    Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听

  8. 8

    应用发明者仅从列表中选择一个随机项一次

  9. 9

    在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？

  10. 10

    HttpClient中的角度变化检测

  11. 11

    在Wagtail管理员中，如何禁用图像和文档的摘要项？

  12. 12

    如何了解DFT结果

  13. 13

    Camunda-根据分配的组过滤任务列表

  14. 14

    错误：找不到存根。请确保已调用spring-cloud-contract：convert

  15. 15

    为什么此后台线程中未处理的异常不会终止我的进程？

  16. 16

    构建类似于Jarvis的本地语言应用程序

  17. 17

    使用分隔符将成对相邻的数组元素相互连接

  18. 18

    您如何通过 Nativescript 中的 Fetch 发出发布请求？

  19. 19

    通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）

  20. 20

    使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面

  21. 21

    使用 text() 獲取特定文本節點的 XPath

热门标签

归档