javascript - 是否可以通过更改类列表状态以某种方式缩短代码
问题描述
是否可以通过更改类列表状态以某种方式缩短代码。代码看起来非常混乱和难以理解。每次当我们点击播放按钮或运行 setInterval 时,我们必须添加或删除一个类——当它过期或我们自己停止它时。它可以以某种方式改进吗?链接到 jsfiddle:https ://jsfiddle.net/ameli7777/po7qdwk8/57/
const spinBlock = document.querySelector('.spin-block');
const spin = document.querySelector('.spin');
const spinStop = document.querySelector('.spin-stop');
const disableBtn = document.querySelectorAll('.dis');
const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const stopActive = document.querySelector('.stop-active');
const autoSpinBlock = document.querySelector('.auto-spin-block');
amountOfRotation.addEventListener('click', ({ target: { dataset } }) => {
countdown.classList.remove('stop-game');
autoButton.classList.add('stop-game');
countdownNumbValue.innerHTML = dataset.count;
spin.classList.add('stop-game');
spinStop.classList.remove('stop-game');
disableBtn.forEach(item => item.classList.add('disable-btn-clone'));
spinBlock.classList.add('disable-btn-spin');
let timerId = setInterval(() => {
countdownNumbValue.innerHTML--;
spinBlock.classList.toggle('spin-block-dis');
stopActive.classList.toggle('stop-btn-inactive');
autoSpinBlock.classList.add('disable-hover');
if(countdownNumbValue.innerHTML <= 0) {
clearInterval(timerId);
countdown.classList.add('stop-game');
autoButton.classList.remove('stop-game');
spinBlock.classList.remove('spin-block-dis');
autoSpinBlock.classList.remove('disable-hover');
stopActive.classList.remove('stop-btn-inactive');
spin.classList.remove('stop-game');
spinStop.classList.add('stop-game');
spinBlock.classList.remove('disable-btn-spin');
disableBtn.forEach(item => item.classList.remove('disable-btn-clone'));
};
}, 1500);
countdown.addEventListener('click', () => {
countdown.classList.add('stop-game');
autoButton.classList.remove('stop-game');
spin.classList.remove('stop-game');
spinStop.classList.add('stop-game');
spinBlock.classList.remove('disable-btn-spin');
spinBlock.classList.remove('spin-block-dis');
clearInterval(timerId);
autoSpinBlock.classList.remove('disable-hover');
stopActive.classList.remove('stop-btn-inactive');
disableBtn.forEach(item => item.classList.remove('disable-btn-clone'));
})
});
spinBlock.addEventListener('click', () => {
spin.classList.toggle('stop-game');
spinStop.classList.toggle('stop-game');
disableBtn.forEach(item => item.classList.toggle('disable-btn-clone'));
autoSpinBlock.classList.toggle('disable-hover');
});
.wrapper {
display: flex;
margin-top: 20%;
}
.button-plus, .button-minus {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.button-minus-block {
width: 33%;
display: flex;
align-items: center;
justify-content: center;
height: 88%;
margin-left: 2%;
}
.button-plus-block {
width: 33%;
display: flex;
align-items: center;
justify-content: center;
height: 88%;
margin-right: 2%;
}
.bet-block {
width: 15.5%;
display: flex;
align-items: center;
height: 41px;
margin-left: 0.5%;
margin-top: 2.5%;
}
.total-count, .coin-count {
color: #ffd100;
margin: 0;
font-size: 12px;
}
.auto-button {
width: 24%;
display: flex;
margin-left: 20%;
margin-top: 1%;
}
.auto-block {
width: 90%;
height: 41px;
display: flex;
align-items: center;
cursor: pointer;
z-index: 100;
}
.spin-block {
background: yellow;
display: flex;
align-items: center;
z-index: 100;
width: 112px;
height: 112px;
justify-content: center;
cursor: pointer;
}
.spin-block-dis {
background: red;
}
.spin {
width: 70%;
height: 62px;
}
.spin-stop {
width: 48%;
}
.feature-block {
position: absolute;
margin-left: 6px;
/* bottom: 70%; */
width: 8%;
height: 122px;
z-index: -1;
max-height: 0px;
overflow: hidden;
/* transition: max-height 0.4s linear; */
margin-top: -120px;
}
.feature-block ul {
list-style-type: none;
color: #ffd100;
font-size: 14px;
padding: 10%;
margin-top: -10%;
}
.feature-block p {
color: #ffd100;
font-size: 10px;
padding: 10%;
margin: 0;
padding-bottom: 0;
}
.feature-block ul li:hover {
color: white;
cursor: pointer;
}
.auto-spin-block {
width: 18%;
height: 41px;
margin-top: 2.5%;
margin-left: 0.5%;
z-index: 10;
}
.auto-spin-block:hover .feature-block {
max-height: 160px;
height: 122px;
}
.disable-btn-clone {
pointer-events: none;
opacity: 0.4;
}
.disable-btn-spin {
pointer-events: none;
}
.countdown-txt {
color: #3d0000;
}
.countdown {
width: 55%;
display: flex;
align-items: center;
margin-left: 9%;
}
.countdown-numb {
width: 29px;
color: #ffd100;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5%;
}
.stop-game {
display: none;
}
.stop-btn-inactive {
opacity: 0.3;
}
.disable-hover:hover .feature-block {
max-height: 0px;
height: 122px;
}
<div class="wrapper">
<div class="bet-block">
<div class="button-minus-block">
<div class="button-minus dis" id="button-minus">
<button>
-
</button>
</div>
</div>
<div class="total-bet-block">
<p class="total-bet-title">TOTAL</p>
<p class="total-count">$1.50</p>
</div>
<div class="button-plus-block">
<div class="button-plus dis" id="button-plus">
<button>
+
</button>
</div>
</div>
</div>
<div class="auto-spin-block">
<div class="auto-block">
<div class="auto-button dis">
<p>
hover on
</p>
</div>
<div class="countdown stop-game">
<div class="countdown-numb">
<span class="countdown-numb-value"></span>
</div>
<span class="countdown-txt">STOP</span>
</div>
</div>
<div class="feature-block">
<div class="feature-block-paragraph">
<ul class="feature-block-list">
<li class="sound-div" data-count="25">25</li>
<li class="sound-div" data-count="20">20</li>
<li class="sound-div" data-count="15">15</li>
<li class="sound-div" data-count="10">10</li>
<li class="sound-div" data-count="5">5</li>
</ul>
</div>
</div>
</div>
<div class="spin-block">
<div class="spin">
<p>
Play
</p>
</div>
<div class="spin-stop stop-game">
<p class="stop-active">
Stop
</p>
</div>
</div>
</div>
解决方案
一个简单的解决方案是将 body 标记视为控制标记,因此您可以在 BODY 上切换 SINGLE 类,例如:
document.body.classList.toggle("game-stopped");
然后在您与您的stop-game
班级一起隐藏的每个元素上,给他们所有相同的班级,例如(game-element
新班级在哪里)
<div class="auto-button game-element dis">
<p>hover on</p>
</div>
然后创建以下 CSS:
.game-stopped .game-element{display:none;}
您所做的是,当您为 body 提供游戏停止类时,您拥有“游戏元素”类的每个元素都将被隐藏。
推荐阅读
- python - 如何在不覆盖列值的情况下连接数据帧
- python - 如何使用交易机器人同时监控多个资产?
- java - 来自前端的第三方的 Rest API 请求设计
- docusignapi - DocuSign API 设置签名者语言不适用于第一个签名者
- ibm-doors - 使用 IBM DOORS 并需要 DXL 脚本将段落 ID 添加到链接
- python - MD5 Hash Cracker -- Unicode 对象必须在散列之前进行编码
- bash - curl pull request 错误 - fork_collab Fork collab 不能由未经许可的人授予
- android - Socket.io android 未连接它与 web clinet 在 android 中无法正常工作
- python - 具有自定义评分函数的 Python Scikit-Learn RandomizedSearchCV
- asp.net - 无法创建 ASP.content_xxx_aspx