【发布时间】：2023-03-31 15:20:05
【问题描述】：
我是 jQuery 新手，遇到一个不知道如何解决的问题。
我正在创建一个学习管理系统，供教师将作业分配给他们的班级。在下面显示的菜单中，当用户在“类设置”选项卡上时，他们应该能够取消选中类名旁边的框：
- 隐藏分配/到期日输入，并
- 通过使
.unassigned类可见来替换这些输入。
如果用户选中该框，则应该发生相反的情况，基本上就像一个切换。
这是我不知道该怎么做的部分：我什至如何选择相应的<div class='assign'> <div class='due'> <div class='unassign'> 来切换可见性？我认为，所有这些都应该是 <section> 父级的兄弟，将它们组合在一起。
我现在有
var status = $(this).find('section .unassigned');
只是调试，看看我是否可以选择我试图选择的元素，但我没有成功。
非常感谢任何帮助/解释。
// This section handles UX feedback for class settings //
$('.class').on('change', 'input[type="checkbox"]', function() {
var status = $(this).find('section .unassigned');
status.css("background-color", "yellow");
if ($(this).is(":checked")) { // When user checks box
status.hide();
alert('checked');
}
else { // When user unchecks box
status.show();
alert('unchecked');
}
});
// This section handles navigation //
function nav(arg) {
var destination = arg.dataset.nav;
var pages = document.querySelectorAll("[data-page]");
var nav = document.querySelectorAll("[data-nav]");
for (i = 0; i < nav.length; i++) { // Remove the class 'active' if it exists
nav[i].classList.remove('active')
}
arg.classList.add('active');
for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
if (pages[i].dataset.page != destination) {
pages[i].style.display = "none";
} else {
if (destination == 'basic') {pages[i].style.display = "flex";}
if (destination != 'basic') {pages[i].style.display = "block";}
}
}
}.modal {display: block !Important}
.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}
.assignment-window{
display: grid;
position: fixed;
overflow: hidden;
padding: 10px;
padding-bottom: 16px;
box-sizing: border-box;
width: 100vw; height: 70vh;
bottom: 0; left: 0;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: white;
grid-template-rows: auto 1fr;
grid-template-columns: 0.9fr 2.5fr;
grid-template-areas:
"asstop asstop"
"assnav asscontent"}
/* ----------[ASS TOP]---------- */
.asstop {
grid-area: asstop;
padding: 24px 20px;
box-sizing: border-box;
border-bottom: 2px solid #581F98;}
.asstop .title {
display: flex;
align-items: center;}
.asstop .title input {
flex: 1 1;
font-size: 24px;
border-radius: 8px;
margin-right: 20px;
border: 1px solid lightgray}
.asstop select {
outline: none;
-webkit-appearance: none;
padding: 12px 16px;
font-size: 24px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
.asstop button {
margin-top: -5px;}
/* ----------[ASS NAV]---------- */
.assnav {
grid-area: assnav;
padding-top: 20px;
padding-right: 10%;
border-right: 1px solid lightgray}
.assnav ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.assnav li {
display: block;
text-decoration: none;
color: #484848;
font-size: 20px;
padding: 14px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.assnav li:hover {
cursor: pointer;
background-color: #F2F2F2}
.assnav li.active {background-color: #EEEEEE}
/* ----------[ASS CONTENT]---------- */
.asscontent {
grid-area: asscontent;
display: flex;
flex-direction: column;
padding: 30px;
box-sizing: border-box;
overflow: scroll}
.asscontent input:not([type='checkbox']), .asscontent select {
flex: 1;
outline: none;
-webkit-appearance: none;
padding: 8px 16px;
font-size: 18px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
/* ==== Basic Styling ==== */
.asscontent .basic {
display: flex;
height: 100%;
flex-direction: column}
.asscontent .basic textarea {
flex: 1;
font-size: 18px;
border-radius: 8px;
box-sizing: border-box;}
.asscontent .basic .config {
display: flex;
justify-content: space-between;
padding-top: 20px;}
.asscontent .basic input {text-align: center;}
.asscontent .basic .points {width: 80px;}
/* ==== Attachment Styling ==== */
.asscontent .attachments {display: none}
.asscontent .attachments section {
display: flex;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid lightgray}
/* ==== Class Styling ==== */
.asscontent .class {display: none}
.asscontent .class section {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid lightgray}
.asscontent .class label {cursor: pointer;}
.asscontent .class .unassigned {
flex: 1;
text-align: center;
font-style: italic;
color: darkgray;}
/* ==== Delete Styling ==== */
.asscontent .delete {display: none;}
.asscontent .delete ul {margin-bottom: 30px;}
.asscontent .delete li {margin-bottom: 10px;}<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav></nav>
</head>
<div class="modal">
<div class="assignment-window">
<div class='asstop'>
<div class='title'>
<select>
<option>✏️</option>
<option>????</option>
<option>????</option>
<option>????</option>
<option>????</option>
</select>
<input type='text' placeholder='Type assignment title..' value=''>
<button class='button purple-btn'>Save Changes</button>
</div>
</div>
<div class='assnav'>
<ul>
<li data-nav='basic' onclick='nav(this);' class='active'>Basic Setup</li>
<li data-nav='attachments' onclick='nav(this);'>Attachments</li>
<li data-nav='class' onclick='nav(this);'>Class Settings</li>
<li data-nav='delete' onclick='nav(this);'>Delete Assignment</li>
</ul>
</div>
<div class='asscontent'>
<div class='basic' data-page='basic'>
<textarea placeholder='Type assignment directions..'></textarea>
<div class='config'>
<section>
<span>Subject: </span>
<select>
<option>Reading</option>
<option>Social Studies</option>
</select>
</section>
<section>
<span>Points:</span>
<input class='points' type='text'>
</section>
<section>
<span>Submission: </span>
<select>
<option>Require students to scan.</option>
<option>Allow scanning or turn in button.</option>
<option>Grade only: students don't submit.</option>
<option>Do not allow submissions.</option>
</select>
</section>
</div>
</div>
<div class='attachments' data-page='attachments'>
<section>
<div class='displayName'>
<select>
<option>????</option>
<option>????</option>
<option>????</option>
</select>
<input name='attach[1][title]' placeholder='Title of website..' type='text'>
</div>
<div class='url'>
<input name='attach[1][url]' placeholder='Insert website URL..' type='url'>
</div>
<div class='visible'>
<span>Visible: <span>
<select name='attach[1][visible]'>
<option>- All Students -</option>
<option>???? Reading/Social</option>
</select>
</div>
</section>
</div>
<div class='class' data-page='class'>
<section>
<div class='name'>
<label>
<input type='checkbox' checked>
???? Reading/Social
</label>
</div>
<div class='assign'>
<span>Assign:</span>
<input type='date'>
</div>
<div class='due'>
<span>Due:</span>
<input type='datetime-local'>
</div>
<div class='unassigned' hidden>
<span>Not assigned to this class</span>
</div>
</section>
<section>
<div class='name'>
<label>
<input type='checkbox'>
???? Reading/Social
</label>
</div>
<div class='assign' hidden>
<span>Assign:</span>
<input type='date'>
</div>
<div class='due' hidden>
<span>Due:</span>
<input type='datetime-local'>
</div>
<div class='unassigned'>
<span>Not assigned to this class</span>
</div>
</section>
</div>
<div class='delete' data-page='delete'>
<p>Deleting the assignment? The following will happen: </p>
<ul>
<li>All recorded submission and scores will be deleted.</li>
<li>The assignment will be removed from student view.</li>
<li>Student subject averages will adjust from the deleted scores.</li>
<li>This action cannot be undone.</li>
</ul>
<button class='button grey-btn'>Cancel</button>
<button class='button red-btn'>Permanently Delete</button>
</div>
</div>
</div>
</div>【问题讨论】：
标签： javascript jquery