如何为其他类添加类？点击bookmark_icons时用jQuery为bookmark_edit添加类

嘿，我来帮你搞定这两个问题：

你应该是想给带有某个类名的DOM元素添加额外的类名对吧？这里分两种常用实现方式：

原生JavaScript写法 #

• 针对单个元素：先通过选择器找到目标元素，再用classList.add()方法添加类：

// 找到第一个拥有target-class的元素，添加new-class类
const targetElement = document.querySelector('.target-class');
targetElement.classList.add('new-class');

• 针对所有匹配的元素：用querySelectorAll选中所有元素，遍历后逐个添加：

// 给所有带有target-class的元素都加上new-class
const allElements = document.querySelectorAll('.target-class');
allElements.forEach(element => element.classList.add('new-class'));

jQuery写法 #

jQuery的语法更简洁，而且默认会处理所有匹配的元素：

// 给所有.target-class元素添加new-class
$('.target-class').addClass('new-class');

如果只想给第一个匹配的元素加类，加上:first选择器即可：

$('.target-class:first').addClass('new-class');

这个需求很清晰，咱们通过绑定点击事件+addClass()方法就能搞定，下面是具体实现和细节说明：

基础版代码 #

首先要确保DOM加载完成后再执行代码，所以用$(document).ready()包裹：

$(document).ready(function() {
  // 给所有.bookmark_icons绑定点击事件
  $('.bookmark_icons').on('click', function() {
    // 给所有.bookmark_edit元素添加你想要的类（比如叫active）
    $('.bookmark_edit').addClass('active');
  });
});

更精准的场景处理 #

如果你的页面里有多个.bookmark_icons和对应的.bookmark_edit（比如列表项里的成对元素），直接选所有.bookmark_edit会把全部元素都加上类，这时候可以用jQuery的DOM遍历方法定位到当前点击元素对应的目标：

$(document).ready(function() {
  $('.bookmark_icons').on('click', function() {
    // 假设.bookmark_edit是当前点击元素的兄弟节点
    $(this).siblings('.bookmark_edit').addClass('active');
    // 如果是父子关系，可以用$(this).closest('.parent-container').find('.bookmark_edit')
  });
});

另外，如果需要点击切换类（点击一次加，再点击一次移除），把addClass()换成toggleClass()就可以了：

$(this).siblings('.bookmark_edit').toggleClass('active');

内容的提问来源于stack exchange，提问作者Viraj