Fatal编程技术网
  • javascript/
  • Javascript 即使其他方法在同一对象上工作，jQuery addClass也不工作

Javascript 即使其他方法在同一对象上工作，jQuery addClass也不工作

javascript jquery html css

Javascript 即使其他方法在同一对象上工作，jQuery addClass也不工作,javascript,jquery,html,css,smarty,Javascript,Jquery,Html,Css,Smarty,我正在用php开发您在上面看到的网站，并使用Smarty模板引擎来处理显示 我有一个非常奇怪的问题，我想不出解决办法。我正在使用的一个Java脚本来自MaterializeCSS。这是用于侧导航菜单，当单击标题“开始”、“PXE”和“系统”时，侧导航菜单将自动展开和收缩。根据Materialize网站，为了自动扩展其中一个标题，您只需将活动类添加到该元素中，请参见上面Materialize链接上的预选部分 很简单。我在jQuery中使用addClass方法尝试了这一点，但没有遵循任何运气代码。在

我正在用php开发您在上面看到的网站，并使用Smarty模板引擎来处理显示

我有一个非常奇怪的问题，我想不出解决办法。我正在使用的一个Java脚本来自MaterializeCSS。这是用于侧导航菜单，当单击标题“开始”、“PXE”和“系统”时，侧导航菜单将自动展开和收缩。根据Materialize网站，为了自动扩展其中一个标题，您只需将活动类添加到该元素中，请参见上面Materialize链接上的预选部分

很简单。我在jQuery中使用addClass方法尝试了这一点，但没有遵循任何运气代码。在这里和网络周围做研究让我一事无成，所以我决定从简单开始，选择一个任意元素来添加一个类，以确保我正确理解addClass方法并正确使用它

所以我在一个名为expandSideNav.js的文件中有这个jQuery

$(document).ready(function() {   

    $(function(){
        alert("ExpandSideNav included");

        var el = $('h1');

        el.css("color", "orange");

        el.addClass('active');
    })
});
表单中心的Stock Number文本是唯一的h1标记，从上面的图像中可以看到，文本的颜色实际上变为橙色，但是元素从未获得添加到其中的活动类。请参见下面IE中的View Source中实际呈现的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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon/accept.png">

    <title>Configurator Tool</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/materialize.css" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <!-- Jumbotron theme restricts container to 730px max -->
    <!--<link href="css/jumbotron-narrow.css" rel="stylesheet"> -->

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="./scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="./scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="./scripts/additional-methods.min.js" type="text/javascript"></script>
    <script src="./scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="./scripts/materialize.min.js" type="text/javascript"></script>
    <script src="./scripts/index.js" type="text/javascript"></script>
</head>
<body>
    <div class="container divcontainer">
        <div id="logo">
            <img src="./img/Arrow-Logo.png" class="img-responsive center-block" alt="Arrow Logo"/>
            <span>&reg;</span>
        </div>
        <div class="mastercontainer">
            <div class ="leftnavbar">
                <ul class="nav nav-pills nav-stacked collapsible collapsible-accordion" role="tablist">
                    <li class="">
                    <a href="#" class="collapsible-header"><img src="./img/icon/Network Connection Router.ico" height="40" width="40" />Start</a>
                    <div class="collapsible-body">
                        <ul>                     
                            <li class="">
                                <a href="index.php?pagetitle=stocknumber.tpl"><img src="./img/arrow_v.png" height="40" width="40" />Stock Number</a>
                            </li>                    
                            <li class="">
                                <a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />StartPlaceholder1</a>
                            </li>                    
                            <li class="">
                                <a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />StartPlaceholder2</a>
                            </li>
                        </ul>
                    </div>
                    </li>
                    <li class="">
                        <a href="#" class="collapsible-header"><img src="./img/icon/System.ico" height="40" width="40" />PXE</a>
                        <div class="collapsible-body">
                            <ul>                         
                                <li class="">
                                    <a href="index.php?pagetitle=timezone.tpl"><img src="./img/arrow_v.png" height="40" width="40" />Time Zone</a>
                                </li>                        
                                <li class="">
                                    <a href="index.php?pagetitle=#"><img src="./img/arrow_v.png" height="40" width="40" />PXEPlaceholder1</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="">
                        <a href="#" class="collapsible-header"><img src="./img/icon/PCI-card_network.ico" height="40" width="40" />System</a>
                        <div class="collapsible-body">
                            <ul>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div> <!-- leftnavbar -->
            <div class="rightcontent">
                <div id="rightcontentnonav">                                                                                                
                    <div class="welcome-header">
                        <h1>Stock Number</h1>
                        <h3>Entry Form</h3>
                    </div>
                    <div id="stocknum-content">    
                        <form id="stockNumForm" action="/IniGen_9_21_15/php/verifyStockPlaceholder.php" method="POST">
                            <label>Stock Number: </label>

                            <input id="stocknum" name="stocknum" type="text" value="" data-title="placehold"
                                   data-content="placehold" data-placement="bottom"
                                   data-toggle="popover" data-trigger="manual" onkeyup="ValidInputImage()" size="10" maxlength="8"/>

                        </form>    
                    </div>
                    <script src="./scripts/stocknum.js" type="text/javascript"></script>
                    <script src="./scripts/expandSideNav.js" type="text/javascript"></script>
                </div> <!-- rightcontentnonav --> 
                <a href="php/reset.php">Reset</a>
            </div> <!-- rightcontent -->               
            <div id="pager">
                <ul class="pager">
                    <li class="previous disabled">
                        <a class="disablelink" href="index.php?pagenav=-1"><span aria-hidden="true">&larr;</span> Back</a>
                    </li>
                    <li class="next">
                        <a id="nexLink" href="index.php?pagetitle=">Next <span aria-hidden="true">&rarr;</span></a>
                    </li>
                </ul>
            </div> <!-- pager -->
        </div> <!-- mastercontainer -->
    </div> <!-- container -->
    <footer></footer>
</body>
</html>
所以我被两件事弄糊涂了

为什么它能够在这个函数中添加css样式，而不能在addClass中添加，因为它们都在同一个元素和同一个函数中操作？我尝试将jQuery代码放在这里看到的通用函数内，也放在document.ready中的函数外 sidenavigation菜单仍按预期工作，可以扩展和收缩。展开时，包含的materialize.min.js文件通过将活动类添加到标题来展开菜单。那么，为什么该文件能够使用此方法添加类，而我的expandSideNav.js却不能？ 请记住，我的最终目标是能够将活动类添加到可折叠的头元素中，但是我正在使用我在这里提供的代码从小处开始，并尝试找出addClass方法无法按预期工作的原因

如果需要，可以在上面链接的materialize CSS网站上找到materialize.min.js和materialize.js

提前感谢您的帮助

尝试从所有列表项中删除活动类，然后将其添加到元素中。可能是两个项目得到了相同的类。因此，css规则可能会被覆盖，这可能是因为您正在使用addClass，查看jQuery文档，它会将一个类添加到元素中，该元素上已经声明了一个类。以下是jQuery所说的

需要注意的是，此方法不会替换类。它只是简单地添加类，将其附加到可能已经分配给元素的任何类

您可能希望尝试使用空的class属性呈现h1元素，或者其中的类是伪类。如果失败了，你有没有在你的函数中尝试过这个

el.attr'class'，'active'

祝你好运。

活动类确实是按照你使用的方法添加的。如果其他地方有故障，请进行验证

$(document).ready(function() {   
$(function(){
    var el = $('h1');
    el.css("color", "orange");
    el.addClass('active');
})
});

.active{
   background-color:purple;
}
更新

在您提供的链接中，可折叠头和可折叠体是连续的div元素，采用类似的结构，并且必须工作。或者，默认情况下包含活动类。保持这样

<div class="collapsible-header active"><a href="#"><img src="./img/icon/Network Connection Router.ico" height="40" width="40" />Start</a></div>

<div class="collapsible-body">Whatever you need in body</div>
View source仅显示从服务器返回的HTML标记。要查看生成的内容，您需要使用开发人员工具并检查元素。试试看-我很确定正在添加活动类！我怀疑这不是在增加课程。更可能的情况是，正在添加类，但由于更具体的规则或样式表中稍后出现的相同规则而没有应用这些规则。使用浏览器中的调试器工具查看应用了哪些样式。关于.css的工作，该函数内联的样式比任何外部类定义都具有更高的特异性，这将…哇，我觉得自己像个傻瓜！非常感谢HaukurHaf！！！！所以我检查了Inspect元素，它确实添加了活动类。给我一秒钟，让我试着把它改成我想要的功能，看看它是否正常工作。将以update.War10ck进行响应，太棒了！谢谢我也会试试。我想使用该功能进行调试，但没有花时间研究/学习如何使用它。我不是一个训练有素的网络开发人员，我在不断学习。我认为，如果我投入一些时间学习使用调试器工具，那么调试器工具将为我节省大量的时间。所以，你们都非常正确地指出正在添加活动类。因此，现在我修改了代码，将活动类添加到第一个可折叠的头类中，根据Materialize文档，这就是需要完成的全部工作。但是我检查我
nspect元素并查看是否确实添加了活动类，但是，该部分不会自动展开。因此，我第一次点击链接时，materialize.min.js会删除活动链接，但什么也没有发生，第二次点击链接时，js会添加活动链接，部分会展开？？？你误解了文档。addClass不会两次添加同一个类。使用它向一个没有类的元素添加一个类是完全正确和有效的。我从来没有说过它将添加一个类两次，我说过，根据文档，它将向已经存在的类添加其他类。如果在没有说明类的情况下使用它是可以的，那么这有助于解决问题。谢谢。现在你误解我了：-你说它将向元素添加一个类，元素上已经声明了一个类。然后您建议他向元素添加一个空的class属性。这根本不是必需的。我只是说事实并非如此。您提到的文档部分声明不会添加两次类，而不是元素需要已经定义了类。需要注意的是，此方法不会替换类。它只是简单地添加类，将其附加到可能已经分配给元素的任何类。附加：在书面文档的结尾添加一些东西嘿，波林斯基，谢谢你的投入，并花时间阅读和回答我的问题。那些对原始问题发表评论的人为我指出了正确的方向。谢谢Ekansh！那些对我最初的问题发表评论的人找到了正确的解决方案。正在添加该类，我只是在错误的位置查找它。谢谢你看我的问题！你完全正确！该类正在被添加，但我本应该签出Inspect元素的时候，我正在ViewSource中寻找它。现在我有一个新问题，和原来的问题有关。我已经在我原来问题的评论中发布了这个新问题，因为你似乎知道你在做什么。如果你能看一下并给出你的意见，我会很高兴的。再次感谢。我完全同意你的观点，这是一个我从未完全理解的矛盾。所以在Materialize文档中，我看到他们对可折叠部分使用嵌套div。然而，我喜欢他们的侧导航菜单，并想复制它，所以我检查了该菜单上的元素，它的结构与我的一样，在a元素中有可折叠的标题，在div元素中有以下可折叠的主体。知道为什么他们的侧导航菜单会是这样吗？