我刚开始使用 JavaScript 和 jQuery,遇到了一些问题,我什至不知道如何开始解决。我正在编写教师成绩簿。每当用户运行 saveScores()
函数时,如果在 NOT 折叠的类别中有 ANY 分数留空,则应发送警报。否则,如果所有分数都已填写,则应提交页面上的表格。
分数的示例 HTML: <td class='score'> <input type='text' name='grades[26][32]'> /10 </td>
我想我需要运行一个循环,但我无法弄清楚的部分是折叠部分。我将如何仅在未折叠的类别上运行循环?另外,这个循环会是什么样子?
非常感谢任何建议、解决方案或有用的文章。
对于视觉人士:如果在此示例中运行该函数,则会发送警报,因为红色圆圈中的输入为空。 “词汇工作表”下的所有分数都将被忽略,因为该类别现在已折叠。
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
$("input[type=text]").change(function() {
$('.floater').get(0).style.display = 'block';
});
var confirm = document.getElementById("confirm");
function saveScores(arg) {
/* If all scores are filled in */
{
document.getElementByTagName("form").submit();
}
/* Else if any score is blank */
{
alert("A score is left blank!");
} else if (arg == "hide") {
confirm.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == confirm) {
confirm.style.display = "none";
}
}
body {
margin: 0;
background-color: #F2F2F2;
}
.topbar {
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328
}
#btmbar {
display: inline-block;
grid-area: btmbar;
border-top: 2px solid darkgray;
background-color: #F2F2F2;
}
#content {
margin-top: 60px;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: calc(100vh-60px);
}
table {
width: 100%;
border-collapse: collapse;
}
.labels td {
text-align: center;
color: black;
padding: 16px;
border-bottom: 1px solid gray
}
td {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 0.5px solid gray
}
.name {
display: flex;
justify-content: start;
align-items: center;
font-size: 18px
}
.name .pic {
display: inline-block;
width: 35px;
clip-path: circle();
margin-right: 10px;
}
.date {
color: gray;
font-size: 15px
}
.comment input {
padding: 10px;
border-radius: 6px;
font-size: 16px;
width: 90%;
}
.score input {
text-align: center;
padding: 10px;
border-radius: 6px;
font-size: 16px;
width: 50px;
}
[data-toggle="toggle"] {
display: none;
}
.floater {
display: none;
position: fixed;
bottom: 16px;
right: 10px;
}
.floater button {
padding: 12px;
font-size: 18px
}
/* ----------[MODAL]---------- */
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
.confirm-window {
display: block;
position: fixed;
overflow: hidden;
width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
background-color: white;
transition: height 0.5s;
}
.modal-top {
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
width: 100%;
height: 30px;
font-size: 20px;
color: white;
background-color: #5B7042
}
.modal-content {
padding: 16px;
text-align: center;
margin-bottom: 10px
}
.modal-content .desc {
margin-bottom: 20px;
}
.modal label {
display: block;
margin-bottom: 10px;
text-align: left;
}
.modal-controls {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 16px
}
.modal-controls button {
width: 40%
}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='content'>
<form action='score.int.php' method='POST'>
<table>
<colgroup>
<col width='20%'>
<col width='20%'>
<col width='30%'>
<col width='10%'>
</colgroup>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="1">American Revolution</label>
<input type="checkbox" id="1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="2">Vocabulary Worksheet</label>
<input type="checkbox" id="2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="3">Interactive Notebook</label>
<input type="checkbox" id="3" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
</table>
</form>
</div>
<div class='floater'>
<button class='button green-btn' onclick='saveScores("show");'>Record</button>
</div>
<div id="confirm" class="modal">
<div class="confirm-window">
<div class='modal-top'></div>
<div class='modal-content'>
<div class='desc'>There are scores left blank. How should these be handled?</div>
<label>
<input type='checkbox'>
Reset streak
</label>
<label>
<input type='checkbox'>
Mark as zero
</label>
<label>
<input type='checkbox'>
Send back to student
</label>
</div>
<div class='modal-controls'>
<button class='button grey-btn' onclick='saveScores("hide");'>Cancel</button>
<button class='button green-btn'>Save Scores</button>
</div>
</div>
</div>
答案 0 :(得分:1)
您可以按值过滤输入数组并过滤掉隐藏的tbody,例如
allscoresfilled = $('tbody:not(:hidden) td.score input').filter(function() {
return !this.value;
}).length === 0
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function() {
$(this).parents().next('.hide').toggle();
});
});
$("input[type=text]").change(function() {
$('.floater').get(0).style.display = 'block';
});
var confirm = document.getElementById("confirm");
function saveScores(arg) {
let allscoresfilled = $('tbody:not(:hidden) td.score input').filter(function() {
return !this.value;
}).length === 0
if (allscoresfilled) {
document.querySelector("form").submit();
} else {
alert("A score is left blank!");
}
if (arg == "hide") {
confirm.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == confirm) {
confirm.style.display = "none";
}
}
body {
margin: 0;
background-color: #F2F2F2;
}
.topbar {
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328
}
#btmbar {
display: inline-block;
grid-area: btmbar;
border-top: 2px solid darkgray;
background-color: #F2F2F2;
}
#content {
margin-top: 60px;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: calc(100vh-60px);
}
table {
width: 100%;
border-collapse: collapse;
}
.labels td {
text-align: center;
color: black;
padding: 16px;
border-bottom: 1px solid gray
}
td {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 0.5px solid gray
}
.name {
display: flex;
justify-content: start;
align-items: center;
font-size: 18px
}
.name .pic {
display: inline-block;
width: 35px;
clip-path: circle();
margin-right: 10px;
}
.date {
color: gray;
font-size: 15px
}
.comment input {
padding: 10px;
border-radius: 6px;
font-size: 16px;
width: 90%;
}
.score input {
text-align: center;
padding: 10px;
border-radius: 6px;
font-size: 16px;
width: 50px;
}
[data-toggle="toggle"] {
display: none;
}
.floater {
display: none;
position: fixed;
bottom: 16px;
right: 10px;
}
.floater button {
padding: 12px;
font-size: 18px
}
/* ----------[MODAL]---------- */
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
.confirm-window {
display: block;
position: fixed;
overflow: hidden;
width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
background-color: white;
transition: height 0.5s;
}
.modal-top {
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
width: 100%;
height: 30px;
font-size: 20px;
color: white;
background-color: #5B7042
}
.modal-content {
padding: 16px;
text-align: center;
margin-bottom: 10px
}
.modal-content .desc {
margin-bottom: 20px;
}
.modal label {
display: block;
margin-bottom: 10px;
text-align: left;
}
.modal-controls {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 16px
}
.modal-controls button {
width: 40%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<div id='content'>
<form action='score.int.php' method='POST'>
<table>
<colgroup>
<col width='20%'>
<col width='20%'>
<col width='30%'>
<col width='10%'>
</colgroup>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="1">American Revolution</label>
<input type="checkbox" id="1" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="2">Vocabulary Worksheet</label>
<input type="checkbox" id="2" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
<tbody class='labels'>
<tr>
<td colspan='4'>
<label for="3">Interactive Notebook</label>
<input type="checkbox" id="3" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class='hide'>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
<tr>
<td class='name'>
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</td>
<td class='date'> Fri, Jul 22 at 3:15 PM </td>
<td class='comment'> <input type='text'> </td>
<td class='score'> <input type='text'> /10 </td>
</tr>
</tbody>
</table>
</form>
</div>
<div class='floater'>
<button class='button green-btn' onclick='saveScores("show");'>Record</button>
</div>
<div id="confirm" class="modal">
<div class="confirm-window">
<div class='modal-top'></div>
<div class='modal-content'>
<div class='desc'>There are scores left blank. How should these be handled?</div>
<label>
<input type='checkbox'>
Reset streak
</label>
<label>
<input type='checkbox'>
Mark as zero
</label>
<label>
<input type='checkbox'>
Send back to student
</label>
</div>
<div class='modal-controls'>
<button class='button grey-btn' onclick='saveScores("hide");'>Cancel</button>
<button class='button green-btn'>Save Scores</button>
</div>
</div>
</div>