如何在JS中獲得多功能按鈕？例如：第一次單擊將按鈕向下移動，下次單擊將其回傳到默認位置。
let caoButton = document.querySelector('.js-cao-2');
caoButton.style.position = 'absolute';
caoButton.style.top = '0';
caoButton.style.left = '0';
caoButton.addEventListener('click',() {
caoButton.style.top = 'unset';
caoButton.style.left = 'unset';
caoButton.style.bottom = '0';
caoButton.style.right = '0';
});
uj5u.com熱心網友回復：
同意@charlietfl
let caoButton = document.querySelector('.js-cao-2');
caoButton.addEventListener('click',()=>caoButton.classList.toggle("moveDown"));.js-cao-2{
position: absolute;
top: 0;
left: 0;
}
.moveDown {
top: unset;
left: unset;
bottom: 0;
right: 0;
}<div style="height: 100vh">
<button class="js-cao-2" >Move me</button>
</div>如果您希望做更多的事情只是操作 css 并且您必須使用 JavaScript，您還可以執行以下操作：
let caoButton = document.querySelector('.js-cao-2');
caoButton.addEventListener('click',firstFunctionality);
function firstFunctionality(){
caoButton.removeEventListener('click', firstFunctionality)
caoButton.addEventListener('click',secondFunctionality);
//do stuff here
}
function secondFunctionality(){
caoButton.removeEventListener('click', secondFunctionality)
caoButton.addEventListener('click', firstFunctionality);
//do something different here
}
uj5u.com熱心網友回復：
這將觸發按鈕上的多個操作。
let caoButton = document.querySelector('.js-cao-2');
const allTasks = (function* makeTaskGetter(){
const tasks = [
'js-cao-2-down',
'js-cao-2-right',
'js-cao-2-up',
'js-cao-2-left'
];
for (const task of tasks) { yield task; }
})();
caoButton.addEventListener('click', e => {
const { value : task } = allTasks.next();
caoButton.classList.add(task);
});.js-cao-2 {
position: absolute;
}
.js-cao-2-down {
top: 100px;
}
.js-cao-2-right {
left: 100px;
}
.js-cao-2-up {
top: 10px;
}
.js-cao-2-left {
left: 10px;
}<button class="js-cao-2">Click Me</button>還要考慮transform: translate根據您的用例使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401770.html
標籤：javascript
下一篇：vue.js：從字串創建組件