good people of StackOverflow, I greet you all. I wrote this code and I think I really messed it up. The main focal point of this problem is the checkbox (which should control all switch buttons)
NOW THE PROBLEM...
You will notice that after you turn on one or two of the switch buttons, when you try checking the checkbox (which is the table head of that column) the switch buttons seem to jolt or jerk back and forth in opposite directions.
What I'm trying to achieve here is to make all switch buttons follow the same direction whenever the checkbox is checked on or off.
Please help me out guys, thank you :)
<!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" />
<style>
body{
background-color: #e0e0e0;
}
.ads_banner_list .ads_banner_list_head{
background-color: #f0f0f0;
text-transform: capitalize;
padding: 10px 0 10px 20px;
}
.ads_banner_list .ads_banner_list_body{
width: 100%;
}
.ads_banner_list .ads_banner_list_body table{
border-collapse: collapse;
width: 100%;
}
table td:not(th){
font-size: 12px;
}
table th{
font-size: 12px;
}
table select{
font-size: 12px;
}
table button{
font-size: 12px;
padding: 5px;
text-transform: uppercase;
}
table .chk_line{
width: 50px;
height: 4px;
background-color: #807b10;
display: inline-block;
position: relative;
cursor: pointer;
}
table .chk_line .chk_btn{
position: absolute;
line-height: 25px;
width: 25px;
height: 25px;
background-color: #fff;
text-transform: uppercase;
font-size: 10px;
top: 50%;
transform: translateY(-50%);
}
.chk_btn.chk_off{
left: 0;
}
.chk_btn.chk_on{
right: 0;
}
thead tr{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
tbody tr:not(:last-child){
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
}
th,td{
text-align: center;
padding: 10px 0px;
}
.td_img img{
width: 70px;
height: 40px;
}
.approved{
color: chartreuse;
}
.pending{
color: palevioletred;
}
.disapproved{
color: maroon;
}
</style>
<title>Document</title>
</head>
<body>
<div class="ads_banner_list">
<div class="ads_banner_list_head">banner list</div>
<div class="ads_banner_list_body">
<table>
<thead>
<tr>
<th>I.D.</th>
<th>Type</th>
<th>Banner</th>
<th>Status</th>
<th>Validity</th>
<th>Expiration</th>
<th>Section</th>
<th>Clicks</th>
<th><input type="checkbox" /></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Static</td>
<td class="td_img"><img src="./assets/media/images/ads/vita_malt.jpg" alt="" /></td>
<td>Showing</td>
<td>30 Days</td>
<td>15 Days</td>
<td>Home</td>
<td>100</td>
<td class="chk_td">
<div class="chk_line chk_line1"><div class="chk_btn chk_btn1">off</div></div>
</td>
</tr>
<tr>
<td>2</td>
<td>Animated</td>
<td class="td_img"><img src="./assets/media/images/gif/heineken.gif" alt="" /></td>
<td>Queued</td>
<td>1 Day</td>
<td>5 Hours</td>
<td>General</td>
<td>0</td>
<td class="chk_td">
<div class="chk_line chk_line2"><div class="chk_btn chk_btn2">off</div></div>
</td>
</tr>
<tr>
<td>3</td>
<td>Static</td>
<td class="td_img"><img src="./assets/media/images/ads/indomie.jpg" alt="" /></td>
<td>Showing</td>
<td>7 Days</td>
<td>3 Days</td>
<td>Politics</td>
<td>76</td>
<td class="chk_td">
<div class="chk_line chk_line3"><div class="chk_btn chk_btn3">off</div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
let checkbox = document.querySelector('input[type="checkbox"]')
let chk_btn = document.getElementsByClassName('chk_btn')
let chk_line1 = document.querySelector('.chk_line1')
let chk_line2 = document.querySelector('.chk_line2')
let chk_line3 = document.querySelector('.chk_line3')
let chk_btn1 = document.querySelector('.chk_btn1')
let chk_btn2 = document.querySelector('.chk_btn2')
let chk_btn3 = document.querySelector('.chk_btn3')
checkbox.onclick = () => {
for (let i = chk_btn.length - 1; i >= 0; i--) {
let checkedButton = chk_btn[i];
checkedButton.classList.toggle('chk_on')
if (checkedButton.classList.contains('chk_on')) {
checkedButton.textContent = 'on'
} else if (!checkedButton.classList.contains('chk_off')) {
checkedButton.textContent = 'off'
}
}
}
chk_line1.onclick = () => {
chk_btn1.classList.toggle('chk_on')
if (chk_btn1.classList.contains('chk_on')) {
chk_btn1.textContent = 'on'
} else if (!chk_btn1.classList.contains('chk_off')) {
chk_btn1.textContent = 'off'
}
}
chk_line2.onclick = () => {
chk_btn2.classList.toggle('chk_on')
if (chk_btn2.classList.contains('chk_on')) {
chk_btn2.textContent = 'on'
} else if (!chk_btn2.classList.contains('chk_off')) {
chk_btn2.textContent = 'off'
}
}
chk_line3.onclick = () => {
chk_btn3.classList.toggle('chk_on')
if (chk_btn3.classList.contains('chk_on')) {
chk_btn3.textContent = 'on'
} else if (!chk_btn3.classList.contains('chk_off')) {
chk_btn3.textContent = 'off'
}
}
</script>
Aucun commentaire:
Enregistrer un commentaire