干:有条件地运用课程吗？

Question

我正在通过一个数组来根据外部设置的状态应用不同的类.这就是我现在的表现,但我觉得自己很重复自己.有干燥的方法吗？如果有帮助,类名可能是其他东西.

var children2 = Array.from(wrapper.children);
var s = state.state;
children2.forEach((child, i) => {
    var classes = [];
    child.classList.remove('active', 'before', 'previous', 'next', 'after');
    if(i < s) { classes.push('before'); };
    if(i > s) { classes.push('after');  };
    if(i === s) { classes.push('active') }
    if(i === s - 1) { classes.push('previous') }
    if (i === s + 1) { classes.push('next') }
    child.classList.add(...classes)
})

Answer 1

最简单的解决方案是使用toggle:

toggle( String [, force] )

当只有一个参数时:切换类值; 即,如果类存在然后删除它并返回false,如果不存在,则添加它并返回true.

当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则将其删除.

例如这样:

let classes = child.classList;
classes.toggle('before', i < s);
classes.toggle('after', i > s);
classes.toggle('active', i === s);
classes.toggle('previous', i === s-1);
classes.toggle('next', i === s+1);

您还可以使用键和条件创建一个对象,然后toggle单独将它循环到它们:

const classes = {
  before: i < s,
  after: i > s,
  active: i === s,
  previous: i === s - 1,
  next: i === s + 1,
};
Object.entries(classes).forEach(([className, condition]) => child.classList.toggle(className, condition));

(请注意,这Object.entries是ECMAScript 2017功能.)