色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何使用HTML、JavaScript和CSS動態地重新排列列表中的元素？

CSS
傅智翔1年前8瀏覽0評論

問題是這樣的:我想創建一個特定的列表，其中有可能交換這個列表的元素。

在代碼中，標準HTML構造和相應的css樣式代碼:

let items = document.querySelectorAll('.wrapper div')

for (let i = 0; i < items.length; i++) {
  items[i].insertAdjacentHTML(
    'beforeend',
    '<button class="one">1</button> <button class="two">2</button> <button class="three">3</button> <button class="four">4</button>'
  )
}

let oneButton = document.querySelectorAll('.one')
let twoButton = document.querySelectorAll('.two')
let threeButton = document.querySelectorAll('.three')
let fourButton = document.querySelectorAll('.four')





for (let i = 0; i < oneButton.length; i++) {
  oneButton[i].addEventListener('click', order1)
}

function order1(event) {
  if (event.target.closest('.first')) {
    items[0].style.order = '1'
  } else if (event.target.closest('.second')) {
    items[1].style.order = '1'
  } else if (event.target.closest('.third')) {
    items[2].style.order = '1'
  } else if (event.target.closest('.fourth')) {
    items[3].style.order = '1'
  }
}


for (let i = 0; i < twoButton.length; i++) {
  twoButton[i].addEventListener('click', order2)
}

function order2(event) {
  if (event.target.closest('.first')) {
    items[0].style.order = '2'
  } else if (event.target.closest('.second')) {
    items[1].style.order = '2'
  } else if (event.target.closest('.third')) {
    items[2].style.order = '2'
  } else if (event.target.closest('.fourth')) {
    items[3].style.order = '2'
  }
}


for (let i = 0; i < threeButton.length; i++) {
  threeButton[i].addEventListener('click', order3)
}

function order3(event) {
  if (event.target.closest('.first')) {
    items[0].style.order = '3'
  } else if (event.target.closest('.second')) {
    items[1].style.order = '3'
  } else if (event.target.closest('.third')) {
    items[2].style.order = '3'
  } else if (event.target.closest('.fourth')) {
    items[3].style.order = '3'
  }
}


for (let i = 0; i < fourButton.length; i++) {
  fourButton[i].addEventListener('click', order4)
}

function order4(event) {
  if (event.target.closest('.first')) {
    items[0].style.order = '4'
  } else if (event.target.closest('.second')) {
    items[1].style.order = '4'
  } else if (event.target.closest('.third')) {
    items[2].style.order = '4'
  } else if (event.target.closest('.fourth')) {
    items[3].style.order = '4'
  }
}

html {
  background-color: black;
  color: white;
}

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  background-color: gray;
  padding: 30px;
  border-radius: 4px;
  display: flex;
  flex-flow: column nowrap;
}

.wrapper div {
  padding: 20px;
  border-radius: 10px;
  background: #DDD;
  color: black;
  margin: 20px;
  display: flex;
  justify-content: flex-end;
  transition: 1s;
}

.wrapper span {
  display: block;
  margin-right: auto;
}

.wrapper div:nth-child(1) {
  order: 1;
  background: blue;
}

.wrapper div:nth-child(2) {
  order: 2;
  background: red;
}

.wrapper div:nth-child(3) {
  order: 3;
  background: peru;
}

.wrapper div:nth-child(4) {
  order: 4;
  background: violet;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>

  <div class="wrapper">
    <div class="first"><span>1</span></div>
    <div class="second"><span>2</span></div>
    <div class="third"><span>3</span></div>
    <div class="fourth"><span>4</span></div>
  </div>

  <!-- <script src="js/01_binary_search.js"></script> -->
  <script src="js/script.js"></script>
</body>

</html>