我是 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>uj5u.com熱心網友回復：
您的選擇器正在搜索具有unassigneda類的元素，section但會.find()搜索$(this)您的checkbox.
var status = $(this).find('section .unassigned');
相反，您可以使用：
var unassigned = $(this).closest('section').find('.unassigned');
.closest()將匹配作為section元素的第一個父元素，然后.find()將匹配其具有unassigned該類的子元素。
// This section handles UX feedback for class settings //
$('.class').on('change', 'input[type="checkbox"]', function() {
var unassigned = $(this).closest('section').find('.unassigned');
var assign = $(this).closest('section').find('.assign');
var due = $(this).closest('section').find('.due');
unassigned.css("background-color", "yellow");
if ($(this).is(":checked")) { // When user checks box
unassigned.hide();
assign.show();
due.show();
}
else { // When user unchecks box
unassigned.show();
assign.hide();
due.hide();
}
});
// 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392410.html
標籤：javascript 查询
上一篇：在頁面上查找文本并將其放入標簽中