Question

我正在使用react和redux，我在尝试创建减速器时遇到了问题。基本上，我有一个div列表。当我点击div时，我想更新它的z-index，使其成为更高的索引，保持z-index层次结构。

看小提琴： https://jsfiddle.net/pablodarde/mvv6chz3/

changeStack函数就像我的reducer。

在这里，我只想更新要由更高索引排序的notes数组（最后一个元素，更高的索引）。

提前致谢

HTML

<div id="container">
</div>

的JavaScript

let notes = [
    {
    id: 'one',
    label: 'One',
  },
  {
    id: 'two',
    label: 'Two',
  },
  {
    id: 'three',
    label: 'Three',
  },
  {
    id: 'four',
    label: 'Four',
  },
];

const list = document.querySelector('#container');

notes.map((item) => {
    const elem = document.createElement('div');
  elem.id = item.id;
  elem.innerHTML = item.label;
    list.appendChild(elem);
});

const btn1 = document.querySelector('#one');
const btn2 = document.querySelector('#two');
const btn3 = document.querySelector('#three');
const btn4 = document.querySelector('#four');

btn1.addEventListener('click', function(e) {
    changeStack(e.target.id);
});

btn2.addEventListener('click', function(e) {
    changeStack(e.target.id);
});

btn3.addEventListener('click', function(e) {
    changeStack(e.target.id);
});

btn4.addEventListener('click', function(e) {
    changeStack(e.target.id);
});

function changeStack(id) {
    let index = notes.length - 1;
  notes = notes.map((item, idx) => {
    if (idx === notes.length - 1) {
        console.log('last: ', idx);
        return notes[index];
    } else if (item.id == id) {
        console.log('item.id == id: ', idx);
        index = idx;
      return notes[idx + 1];
    } else if (item.id > id) {
        console.log('item.id > id: ', idx);
        return item;
    } else {
        console.log('else: ', idx);
        return item;
    }
  });
  console.log(notes);
}

CSS

body, html {
  width: 100%;
  height: 100%;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ddd;
}
#one, #two, #three, #four {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #990;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  border: 1px solid rgba(0,0,0,.4);
 }

 #one {
   top: 0;
   left: 0;
   z-index: 10;
 }

 #two {
   top: 40px;
   left: 40px;
   z-index: 20;
 }

 #three {
   top: 80px;
   left: 80px;
   z-index: 30;
 }

 #four {
   top: 120px;
   left: 120px;
   z-index: 40;
 }

Answer 1

经过一番研究，我想出了如何达到预期的目标。如果有更优雅的方法，请告诉我。

更新小提琴： https://jsfiddle.net/pablodarde/5ducueqg/7/

更新代码：

<强> HTML

<div id="container">
</div>

<强>的JavaScript

let notes = [
    {
    id: 'note_1',
    label: 'One',
  },
  {
    id: 'note_2',
    label: 'Two',
  },
  {
    id: 'note_3',
    label: 'Three',
  },
  {
    id: 'note_4',
    label: 'Four',
  },
];

const list = document.querySelector('#container');

function setListeners(elems) {
    for(elem of elems) {
    elem.addEventListener('click', function(e) {
      changeStack(e.target.id);
    });
  }
}

function stackElements() {
    while (list.firstChild) {
     list.removeChild(list.firstChild);
  }

  notes.map((item, idx) => {
    const elem = document.createElement('div');
    elem.id = item.id;
    elem.innerHTML = item.label;
    elem.style.zIndex = idx;
    list.appendChild(elem);
  });
  let btns = document.querySelectorAll('#container div');
  setListeners(btns);
}

stackElements();

function changeStack(id) {
    id = id.substr(5);

  // if is not the top element
  if (id !== notes[notes.length - 1].id.substr(5)) {
    let elem = notes[notes.length - 1];
    let index = notes.length - 1;
    notes = notes.map((item, idx) => {
      const _id = item.id.substr(5);

      if (id === _id) {
        elem = notes[idx];
        index = idx;
        return notes[idx + 1];
      } else if (idx === notes.length - 1) {
        return elem;
      } else if (idx > index) {
        return notes[idx + 1];
      } else {
        return item;
      }
    });
  }
  stackElements();
}

<强> CSS

body, html {
  width: 100%;
  height: 100%;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#note_1, #note_2, #note_3, #note_4 {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #ddd;
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  border: 1px solid rgba(0,0,0,.4);
 }

 #note_1 {
   top: 0;
   left: 0;
   z-index: 1;
 }

 #note_2 {
   top: 40px;
   left: 40px;
   z-index: 2;
 }

 #note_3 {
   top: 80px;
   left: 80px;
   z-index: 3;
 }

 #note_4 {
   top: 120px;
   left: 120px;
   z-index: 4;
 }

如何创建一个reducer来处理z-index堆栈

1 个答案: