页面中有4个按钮,依次选中两个按钮交换这两个按钮的位置
时间: 2024-02-26 13:57:10 浏览: 15
可以使用 JavaScript 来实现这个功能。首先需要获取到这4个按钮的 DOM 元素,可以通过 `document.getElementById` 或 `document.querySelector` 等方法来获取。然后给每个按钮添加点击事件监听器,当点击某个按钮时,记录该按钮的位置,再点击另一个按钮时,将两个按钮的位置交换即可。
以下是一个简单的实现示例:
```html
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const btn4 = document.getElementById('btn4');
btn1.addEventListener('click', () => {
const temp = btn1.parentNode.removeChild(btn1);
btn3.parentNode.insertBefore(temp, btn3);
});
btn2.addEventListener('click', () => {
const temp = btn2.parentNode.removeChild(btn2);
btn4.parentNode.insertBefore(temp, btn4);
});
btn3.addEventListener('click', () => {
const temp = btn3.parentNode.removeChild(btn3);
btn1.parentNode.insertBefore(temp, btn1);
});
btn4.addEventListener('click', () => {
const temp = btn4.parentNode.removeChild(btn4);
btn2.parentNode.insertBefore(temp, btn2);
});
</script>
```
以上示例中使用了 `removeChild` 方法和 `insertBefore` 方法来交换按钮的位置。当点击按钮时,先将该按钮从其父节点中删除,然后将其插入到另一个按钮之前。
相关推荐
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)