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

【问题标题】：Jquery alert() works but not addclass() or anything elseJquery alert() 有效，但 addclass() 或其他任何东西无效
【发布时间】：2021-01-26 11:37:13
【问题描述】：

我尝试使用 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>

Console view when click on (a) tag

【问题讨论】：

您可以查看浏览器控制台查看错误。但是，从您的代码中可以明显看出，您必须使用“addClass”而不是“addclass”
同上，但没有错误（还没有），因为它没有那么远 - 更改为 $(document).on... 而不是 $("document")
下一步，请将.on("click", "#active0"... 更改为.on("click", ".folder>a"...

标签： jquery

【解决方案1】：

你有 2 个错误：

addClass 不是 addclass ，垃圾 C 是大写。 jQuery 使用 camelCase 语法。 read more >
$(document) 不是 $("document") 因为它不是您页面内的元素。 read more >

$(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>

【讨论】：

最后它只适用于 jsfiddle 或 sn-p 但不适用于我的应用程序。
你对浏览器的行为有什么想法吗？
能否请您提供单击a 时的控制台屏幕截图？并确保您没有任何重复的 id。
另外脚本的顺序也很重要，你必须先调用jQuery库，然后再调用脚本。

【解决方案2】：

addclass 应该是addClass

使用以下代码

$("#active0").on("click", function () {
      $(this).addClass("active");
});

或者，如果您要动态创建 div，请使用 event delegation

$(document).on("click", "#active0", function () {
      $(this).addClass("active");
});

$(document).ready(function(){
     $("#active0").on("click", 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>

【讨论】：

最后我宣布胜利为时尚早...它适用于 sn-p 或 jsfiddle 但不适用于浏览器。我已添加：