RxJS применяет изменения для элементов один за другим - PullRequest
Новая
       21

RxJS применяет изменения для элементов один за другим

0 голосов
/ 18 декабря 2018

Мне нужна помощь :) Я пытался найти решение в других темах, но не смог, поэтому заранее извиняюсь, если есть.Я новичок.
Итак, проблема.У меня есть куча div.Мне нужно добавить «активный» класс для каждого div, а затем удалить его через 2 секунды, один за другим.
У меня есть решение, но мой мастер говорит, что «from» и затем «of» совсем не годятся.Есть идеи, как это можно сделать другим способом?Заранее спасибо!

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

1 Ответ

0 голосов
/ 19 декабря 2018

Не уверен, если условие «затем удалите его через 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?

...