Javascript 当我需要一个不同的操作时，我应该如何使这个代码变干？ 背景

我有一个方法，可以设置一个新的活动状态，也可以删除前一项上的旧活动状态。看起来像这样

if (this.previousActiveItem) {
    const { element, index } = this.previousActiveItem;
    element.classList.remove('active');
    this.items[index - 1].element.classList.remove('active-sibling');
    this.items[index + 1].element.classList.remove('active-sibling');

}
const { element, index } = this.activeItem;
element.classList.add('active');
this.items[index - 1].element.classList.add('active-sibling');
this.items[index + 1].element.classList.add('active-sibling');

manipulateItem (item) {
    const { element, index } = item;
    element.classList.add('active');
    this.items[index - 1].element.classList.[add || remove]('active-sibling');
    this.items[index + 1].element.classList.[add || remove]('active-sibling');
}

正如您所看到的，它不是干的，因为唯一的区别是主要目标不同，并且操作

remove

或

add

不同

问题: 如何将is代码转换为可重用的函数

我所知道的 我可以用一个函数轻松地修复第一部分，该函数将元素作为变量，如下所示

if (this.previousActiveItem) {
    const { element, index } = this.previousActiveItem;
    element.classList.remove('active');
    this.items[index - 1].element.classList.remove('active-sibling');
    this.items[index + 1].element.classList.remove('active-sibling');

}
const { element, index } = this.activeItem;
element.classList.add('active');
this.items[index - 1].element.classList.add('active-sibling');
this.items[index + 1].element.classList.add('active-sibling');

manipulateItem (item) {
    const { element, index } = item;
    element.classList.add('active');
    this.items[index - 1].element.classList.[add || remove]('active-sibling');
    this.items[index + 1].element.classList.[add || remove]('active-sibling');
}

但是由于参数相同，我如何交换函数调用呢。我不想用一个大的if语句来夸大它

---

如何实现这一点？

您可以使用

类列表的
方法
切换
来实现

function manipulateItem (item, add) {
    const { element, index } = item;
    element.classList.toggle('active', add);
    this.items[index - 1].element.classList.toggle('active-sibling', add);
    this.items[index + 1].element.classList.toggle('active-sibling', add);
}

if (this.previousActiveItem) {
    manipulateItem(this.previousActiveItem, false);
}
manipulateItem(this.activeItem, true);

您可以使用
classList

function manipulateItem (item, add) {
    const { element, index } = item;
    element.classList.toggle('active', add);
    this.items[index - 1].element.classList.toggle('active-sibling', add);
    this.items[index + 1].element.classList.toggle('active-sibling', add);
}

if (this.previousActiveItem) {
    manipulateItem(this.previousActiveItem, false);
}
manipulateItem(this.activeItem, true);

您可以按如下方式访问该函数，因为
classList
是一个对象：

manipleItem（项目，isAdd）{
常量{元素，索引}=项；
类列表[isAdd？“add”：“remove”]（“active”）；
this.items[index-1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
this.items[index+1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
}


this.items=[]；
document.queryselectoral（“div.div”）.forEach（（元素，索引）=>{
这个。项目。推({
元素：元素，
索引：索引
});
});
功能操纵项（项，isAdd）{
常数{
元素，
指数
}=项目；
类列表[isAdd？“add”：“remove”]（“active”）；
this.items[index-1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
this.items[index+1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
}
函数move（）{
var activeElement=document.querySelector（“div.active”）；
操纵项（本条第[1]项为假）；
操纵项（本条第[2]项为真）；
}
。活动同级{
颜色：蓝色；
}
.主动{
颜色：绿色；
}
1
2.
3.
4.
5.
移动
您可以访问以下函数，因为
类列表
是一个对象：

manipleItem（项目，isAdd）{
常量{元素，索引}=项；
类列表[isAdd？“add”：“remove”]（“active”）；
this.items[index-1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
this.items[index+1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
}


this.items=[]；
document.queryselectoral（“div.div”）.forEach（（元素，索引）=>{
这个。项目。推({
元素：元素，
索引：索引
});
});
功能操纵项（项，isAdd）{
常数{
元素，
指数
}=项目；
类列表[isAdd？“add”：“remove”]（“active”）；
this.items[index-1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
this.items[index+1].element.classList[isAdd？'add'：'remove']（'active-sibling'）；
}
函数move（）{
var activeElement=document.querySelector（“div.active”）；
操纵项（本条第[1]项为假）；
操纵项（本条第[2]项为真）；
}
。活动同级{
颜色：蓝色；
}
.主动{
颜色：绿色；
}
1
2.
3.
4.
5.
移动
而不是添加
和删除

您不能使用吗？这将检查类是否已经存在，并自动添加/删除…如此简单，我知道它很容易修复。谢谢。您不能使用

而不是
添加
和
删除
吗？这将检查类是否已经存在，并自动添加/删除…如此简单，我知道它很容易修复。非常感谢。