主页 / 问题 / 1539973
Accepted
Евгений
Asked:2023-09-11 00:27:33 +0800 CST2023-09-11 00:27:33 +0800 CST

通过JS交换html元素

  • 772

有代码，但我仍然不知道如何在单击按钮时交换 SVG 元素。

<div class="container2">
    <div class="pentagon2">
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="red"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="green"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="yellow"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="orange "/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="violet"/>
        </svg>
        <svg width="250" height="250" viewBox="-1 0 101 100">
            <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
        </svg>
    </div>
</div>
<button class="btn">Перемешать</button>

javascript

1 个回答

  1. Best Answer

    let parent = document.querySelector('.pentagon2');
document.querySelector('.btn').addEventListener('click', _ => {
  let figures = document.querySelectorAll("svg");

  let shuffle = function(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      let tmp = arr[i];
      let rnd = Math.floor(Math.random() * (i + 1));
      arr[i] = arr[rnd];
      arr[rnd] = tmp;
    }
    return arr;
  }

  parent.append(...shuffle(Array.from(figures)));

})
    svg {
  width: 70px;
  height: 70px;
}
    <div class="container2">
  <div class="pentagon2">
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="red"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="green"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="yellow"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="orange "/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="violet"/>
                </svg>
    <svg width="250" height="250" viewBox="-1 0 101 100">
                    <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="blue"/>
                </svg>
  </div>
</div>
<button class="btn">Перемешать</button>

    • 1

相关问题