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);

更新，基于注释

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

您在哪里学习rxjs？

RxJS一对一地应用更改

1 个答案: