时间戳

首页 > 解决方案 > Jquery alert() 有效，但 addclass() 或其他任何东西无效

jquery - Jquery alert() 有效，但 addclass() 或其他任何东西无效

问题描述

我尝试使用 jquery 将“活动”类添加到“div”上的“a”标签。
当我使用 Alert() 而不是 addclass() 时，它会找到目标 (#active0)。但是当我插入 addclass() 或其他任何东西时，什么也没有发生。
我是 Jquery 的新手（和论坛 :) ）并且肯定忘记了一些东西或不理解一个概念。
问题：
如何才能看到 .active 类出现在我的 html 中以激活网页上的 .active 类 css 属性？
提前感谢大家的帮助和建议。

您可以在下面找到代码。

     $(document).ready(function(){
    $("document").on("click","#active0", function () {  
        $(this).addclass("active");
        });
   });
.folder{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height:30px;  
}

.folder a{
  display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: rgba(1, 113, 185, 0.8);
    width: 130px;
    border-radius: 20px;
    border:1px solid rgba(1, 113, 185, 0.8);
    background-color: white;
    transition-duration:0.6s;  
}

.folder a.active{
    border:3px solid red !important;
}
<hmtl>
  <body>
      <div id="parent2" class="folder">
        <a id="active2" href="#">test</a>
      </div>
      <div id="parent1" class="folder">
        <a id="active1" href="#">test1</a>
      </div>
      <div id="parent" class="folder">
        <a id="active0" href="#">test2</a>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</hmtl>

单击 (a) 标签时的控制台视图

标签： jquery

解决方案

你有2个错误：

  1. addClass 不addclass，垃圾C就是资本。jQuery 使用 camelCase 语法。阅读更多 >
  2. $(document)不是$("document")因为它不是您页面内的元素。阅读更多 >

$(document).ready(function(){
    $(document).on("click","#active0", function () {  
        $(this).addClass("active");
    });
});
.folder{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height:30px;  
}

.folder a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: rgba(1, 113, 185, 0.8);
    width: 130px;
    border-radius: 20px;
    border:1px solid rgba(1, 113, 185, 0.8);
    background-color: white;
    transition-duration:0.6s;  
}

.folder a.active{
    border:3px solid red !important;
}
<hmtl>
  <body>
      <div id="parent2" class="folder">
        <a id="active2" href="#">test</a>
      </div>
      <div id="parent1" class="folder">
        <a id="active1" href="#">test1</a>
      </div>
      <div id="parent" class="folder">
        <a id="active0" href="#">test2</a>
      </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</hmtl>

推荐阅读