使用 Javascript 更改类的问题答案

【问题标题】：Problems changing a class with Javascript使用 Javascript 更改类的问题
【发布时间】：2014-09-21 05:25:54
【问题描述】：

所以，我在让我的 JavaScript 保持元素的类发生变化时遇到了问题。每当我尝试将元素的类更改为“overlist”时，它的工作时间不到一秒钟，然后将其恢复为原始状态，underlist。我想不出办法让班级留下来。

HTML：

<ul class="overlist">
    <li>
        <a onClick="activateTutorials()">Tutorials</a>
        <ul class="underlist Tutorials">
            <li>
                <a href="#" onClick="frame(1)">Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(2)">More Filler Text</a>
            </li>
            <li>
                <a href="#" onClick="frame(3)">Foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(4)">More foo Tutorial</a>
            </li>
            <li>
                <a href="#" onClick="frame(5)">Foo Guide</a>
            </li>
        </ul>
    </li>

CSS：

.underlist {
    display: none;
}

Javascript：

function activateTutorials(){

    if(document.getElementsByClassName('Tutorials').classList.contains('underlist')){

        document.getElementsByClassName('Tutorials').classList.remove('underlist');

    }else{

         document.getElementsByClassName('Tutorials').classList.add('underlist');

    }
};

【问题讨论】：

那是正确的代码吗？在任何情况下都不会将underlist 更改为overlist。
抱歉，等一下，我以为我复制了整个部分。我的错。编辑：我忘记了函数末尾的括号，但如果你能解释为什么它不会改变，那将不胜感激，我对学习改变类还是很陌生。
没有任何 Javascript 代码会在任何内容中添加“overlist”。它只是添加或删除“underlist”。我的意思是，从字面上看，“overlist”这个词不会出现在代码中。
是的，我刚刚意识到这一点，并意识到我错过了我的目标，谢谢。
只是一个建议：如果你刚刚开始，你可能会发现从学习 jQuery 库开始，然后再回到 vanilla JS 中的 DOM 操作会更容易。使用 jQuery，可以编写该函数（假设您将 a 指定为 id 'underlistToggle'）$("a#underlistToggle").click(function() { $(".Tutorials").toggleClass("underlist"); }); Example jsFiddle。只是一个建议和个人意见——再说一次，我知道你可能不想使用 jQuery 的原因有很多。

标签： javascript html css function class

【解决方案1】：

一些调试思路：好吧，首先你应该检查函数是否正在运行（它不适合我）我是这样修改的：

<a href="#" onClick="javascript:activateTutorials();" class="Tutorials">Tutorials</a>

其次，getElementsByClassname 返回一个数组，所以修改你的脚本如下：

function activateTutorials(){
console.log(document.getElementsByClassName('Tutorials'));
    if(document.getElementsByClassName('Tutorials')[0].classList.contains('underlist'))
 {
     document.getElementsByClassName('Tutorials')[0].classList.remove('underlist');
 }else{
     document.getElementsByClassName('Tutorials')[0].classList.add('underlist');
 }
};

您可能已经注意到函数开头有一个控制台语句，它是一种调试方法（在 chrome 中使用 Ctrl+Shift+J 访问它）。

【讨论】：