我可以遍历这个数字吗？

Question

I am making a reservation system for a fitness center.我正在为健身中心制作预订系统。 If you have a look on table 'obsadenost' there is lock icon + number 0/7.如果您查看表 'obsadenost'，则有锁定图标 + 数字 0/7。 On every click, I want to loop over this number 0/7.每次点击时，我都想循环这个数字 0/7。 What is happening is when I click on it I only put 7/7.发生的事情是当我点击它时，我只放了 7/7。 I want to have it like after every click from 0/7 to 1/7, 2/7 and so on to 7/7.我希望在从 0/7 到 1/7、2/7 等到 7/7 的每次点击之后都拥有它。

 var marcel = document.getElementById('marcel1'); var span = document.querySelector('#pocet').textContent = 0 + '/' + 7; var badge = document.querySelector('#badge').classList.add('badge-success'); var lock = document.querySelector('#lock').classList.add('fa-unlock'); function rezervacka(){ badge = document.querySelector('#badge'); lock = document.querySelector('#lock'); for(i = 1; i <= 7; i++) { var pocet = document.querySelector('#pocet'); pocet.textContent = i + '/' + 7; console.log(pocet); } if(pocet.textContent === '7/7') { badge.classList.add('badge-danger'); lock.classList.add('fa-lock'); }else { badge.classList.add('badge-success'); lock.classList.add('fa-unlock'); } };

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <title>Document</title> </head> <body> <table class="table table-striped table-hover"> <caption> Pondelok, 16.12.2019 <br/> </caption> <thead> <tr> <th>Čas</th> <th>Workout</th> <th>Obsadenosť</th> </tr> </thead> </tbody> <tr> <td> 07:00 - 07:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div id="badge" class="badge"> <i id="lock" class="fa fa-lock"></i>&nbsp;<span id="pocet"></span></div> </td> </tr> <tr> <td> 11:00 - 11:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7 </div> </td> </tr> <tr> <td> 17:00 - 17:50 </td> <td>Powercore Workout so Samom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7 </div> </td> </tr> <tr> <td> 18:00 - 18:50 </td> <td>Powercore Workout so Samom Level 1 Zaciatocnici</td> <td> <div class="badge badge-success"> <i class="fa "></i> 3/7 </div> </td> </tr> </tbody> </table> <button id="marcel1" onclick="rezervacka();">Marcel</button> <button id="marcel2">Marcel</button> <button id="samo">Samo</button> <button id="zaciatok">Zaciatocnici</button> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>

Answer 1

You can do that by checking the current value:您可以通过检查当前值来做到这一点：

var currentVal = Number(pocet.textContent.split('/')[0]);
if(currentVal < 7){
  pocet.textContent = (currentVal+1) + '/' + 7;
}

 var marcel = document.getElementById('marcel1'); var span = document.querySelector('#pocet').textContent = 0 + '/' + 7; var badge = document.querySelector('#badge').classList.add('badge-success'); var lock = document.querySelector('#lock').classList.add('fa-unlock'); function rezervacka(user){ badge = document.querySelector('#badge'); lock = document.querySelector('#lock'); if(user.id == 'marcel1'){ var pocet = document.querySelector('#pocet'); var currentVal = Number(pocet.textContent.split('/')[0]); if(currentVal < 7){ pocet.textContent = (currentVal+1) + '/' + 7; } if(pocet.textContent === '7/7') { badge.classList.add('badge-danger'); lock.classList.add('fa-lock'); }else { badge.classList.add('badge-success'); lock.classList.add('fa-unlock'); } } };

 <script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <table class="table table-striped table-hover"> <caption> Pondelok, 16.12.2019 <br/> </caption> <thead> <tr> <th>Čas</th> <th>Workout</th> <th>Obsadenosť</th> </tr> </thead> <tbody> <tr> <td> 07:00 - 07:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div id="badge" class="badge"> <i id="lock" class="fa fa-lock"></i>&nbsp;<span id="pocet"></span></div> </td> </tr> <tr> <td> 11:00 - 11:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7</div> </td> </tr> <tr> <td> 17:00 - 17:50 </td> <td>Powercore Workout so Samom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7</div> </td> </tr> <tr> <td> 18:00 - 18:50 </td> <td>Powercore Workout so Samom Level 1 Zaciatocnici</td> <td> <div class="badge badge-success"> <i class="fa "></i> 3/7</div> </td> </tr> </tbody> </table> <button id="marcel1" onclick="rezervacka(this);">Marcel</button> <button id="marcel2">Marcel</button> <button id="samo">Samo</button> <button id="zaciatok">Zaciatocnici</button> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <script src="app.js"></script>

我可以遍历这个数字吗？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-15 14:30:26

我可以遍历这个数字吗？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-15 14:30:26

解决方案1
1 已采纳 2019-12-15 14:30:26