当 ZF590B4FDA2C30BE28DD3C8C7C3 中有多个具有相同 class 名称的元素时，如何使用其现有 class 名称将 class 添加到元素中

Question

我在 Click 事件上调用 function 以将 CSS class 添加到具有相同 ZCBB14DZA2ED4F8DCAC2 名称的元素列表中的项目中。

这是我想要实现的目标 单击按钮，我想将 class.active 添加到特定的徽标图像中。 假设在索引 0 或 1

请帮我解决问题。

 document.ready(function() { function setActive() { $(".logo-slider.logos.logo")[0].addClass("active"); } })

 .active { border: 1px solid red; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" onclick="setActive()">Mark Active </button> <div class="logo-slider"> <div class="logos row"> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> </div> </div>

Answer 1

您可以将nth-child() css 属性用于 select 特定元素。 检查下面的片段..

 function setActive() { $(".logo-slider.logos.col:nth-child(2).logo").addClass("active"); }

 .active { border: 1px solid red; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap-grid.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" onclick="setActive()">Mark Active </button> <div class="logo-slider"> <div class="logos row"> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/f4ffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ff6fff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> <div class="col"><img class="logo" src="https://placehold.jp/3d4070/ffffff/150x150.png" /></div> </div> </div>

Answer 2

谢谢你的帮助。 你的评论很有帮助。 我找到了一个替代解决方案。

这就是我的做法。

$(".logo-slider .logos .logo")[0].classList.add("active");

在阅读了您的一些评论后得到了这个想法。 谢谢。