RxJS 对元素一一应用更改

Question

我需要帮助 :) 我试图在其他主题中找到解决方案，但无法找到，所以如果有任何问题，我很抱歉。我是新手。
所以，问题。我有一堆div。我需要为每个 div 添加“活动”类，然后在 2 秒内将其删除。
我有解决方案，但我的主人说“从”然后“的”一点都不好。任何想法如何以其他方式完成？先感谢您！

const boxes = document.querySelectorAll('.box')
const innerBoxes = Array.from(boxes);
const clickOnDiv = fromEvent(innerBoxes, 'click')
   .pipe(
     map(event => {
       let notActiveElements = [];
       for ( let i=0; i < innerBoxes.length; i++) {
         if(innerBoxes[i] != event.target) {
           notActiveElements.push(innerBoxes[i])
         }
       }
       return notActiveElements
     }),
     concatMap(element => from(element)
      .pipe(
        concatMap(element => of(element)
        .pipe(
          tap(el => console.log(el)),
          delay(2000)
        )),
        tap(item => {
          item.classList.add('active')
        }),
        delay(2000),
        tap(item => {
          item.classList.remove('active')
        })        
      ))
   )

clickOnDiv.subscribe()

Answer 1

不确定条件是否“然后在 2 秒内将其一一移除”。不会阻止您遍历数组

   click$.pipe(
      filter(notActive),
      tap((elements) => elements.forEach(addActiveClass)),
      delay(2000),
      tap((elements) => elements.forEach(removeActiveClass))
    ).subscribe();

如果你不能那么

click$.pipe(
    filter(...)
    mergeMap(elements => from(elements)),
    tap(addActiveClass)
    delay(2000)
    tap(removeActiveClass)
).subscribe()

额外：

用户filter：

 let notActiveElements = [];
   for ( let i=0; i < innerBoxes.length; i++) {
     if(innerBoxes[i] != event.target) {
       notActiveElements.push(innerBoxes[i])
     }
   }
   return notActiveElements;

喜欢： notActiveElements = innerBoxes.filter(box => box !== event.target);

更新，基于 cmets

 click$.pipe(
    filter(...)
    concatMap(elements => from(elements).pipe(
        tap(addActiveClass),
        delay(2000),
        tap(removeActiveClass)
    ))
).subscribe()

你在哪里学习rxjs？