我正在嘗試更改我當前的 javascript，以便它提供結果，無論它們是在問題中還是在答案中。
目前，搜索將提供基于按鈕文本的結果。我想包括按鈕文本和答案文本。我還提供了單擊時顯示/隱藏的腳本。
function mySearch() {
var input = document.getElementById('myInput'),
filter = input.value.toUpperCase(),
li = document.querySelectorAll(".ul li");
// Loop through all list items, and hide those who don't match the search query
for (var i = 0; i < li.length; i ) {
var a = li[i].querySelector("button");
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var acc = document.getElementsByClassName("question");
var i;
for (i = 0; i < acc.length; i ) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}<input type="text" id="myInput" onkeyup="mySearch()" placeholder="What do you need help with?" title="search">
<ul id="myUL1" class="ul">
<li>
<button class="question" type="button" onclick="myShow()">What does on-demand learning mean?</button>
<dd class="answer" style="display: none;">On-demand learning is a...
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I get credit for the courses I take? Does The University keep track, or do I have to?</button>
<dd class="answer" style="display: none;">Credit, check! Tracking, check!
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I visit every academy?</button>
<dd class="answer" style="display: none;">Go for it! You can visit each academy and explore their resources.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If I have technical problems, what do I do?</button>
<dd class="answer" style="display: none;">If you have technical problems, submit a case to.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I attend classes/workshops or take advantage of the on-demand
content while I am not at work?</button>
<dd class="answer" style="display: none;">Time spent attending classes/workshops and/or ... timesheet.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I find available workshops?</button>
<dd class="answer" style="display: none;">Check out the Workshops .. latest workshop offerings.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Is there a way to request a workshop that is not currently being
offered?</button>
<dd class="answer" style="display: none;">Yes, you can request a workshop that is not currently being offered by searching for the workshop, selecting the workshop and selecting the Notify Me option.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">What is the differenc...</button>
<dd class="answer" style="display: none;"> but the underlying functionalities will remain the same because it is still in Cornerstone.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">I am on the waitlist; how will I know if I have been added to the
roster?</button>
<dd class="answer" style="display: none;">If you are moved to a workshop roster from the waitlist, you will receive an email with workshop details.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I know who to go to with content questions?</button>
<dd class="answer" style="display: none;">For L&D Academy content questions, submit a case to .</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If something is incorrect on my transcript, who do I need to
contact to get it resolved?</button>
<dd class="answer" style="display: none;">To update information on your transcript, </dd>
</li>
</ul>uj5u.com熱心網友回復：
這是最簡單的
const input = document.getElementById('myInput'),
filter = input.value.toUpperCase(),
lis = document.querySelectorAll(".ul li");
// Loop through all list items, and hide those who don't match the search query
lis.forEach(li => {
const found = li.textContent.toUpperCase().indexOf(filter) > -1
li.hidden = filter && !found
})
顯示代碼片段
function mySearch() {
const input = document.getElementById('myInput'),
filter = input.value.toUpperCase(),
lis = document.querySelectorAll(".ul li");
// Loop through all list items, and hide those who don't match the search query
lis.forEach(li => {
const found = li.textContent.toUpperCase().indexOf(filter) > -1
li.hidden = filter && !found
})
}
var acc = document.getElementsByClassName("question");
var i;
for (i = 0; i < acc.length; i ) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}<input type="text" id="myInput" onkeyup="mySearch()" placeholder="What do you need help with?" title="search">
<ul id="myUL1" class="ul">
<li>
<button class="question" type="button" onclick="myShow()">What does on-demand learning mean?</button>
<dd class="answer" style="display: none;">On-demand learning is a...
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I get credit for the courses I take? Does The University keep track, or do I have to?</button>
<dd class="answer" style="display: none;">Credit, check! Tracking, check!
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I visit every academy?</button>
<dd class="answer" style="display: none;">Go for it! You can visit each academy and explore their resources.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If I have technical problems, what do I do?</button>
<dd class="answer" style="display: none;">If you have technical problems, submit a case to.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I attend classes/workshops or take advantage of the on-demand
content while I am not at work?</button>
<dd class="answer" style="display: none;">Time spent attending classes/workshops and/or ... timesheet.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I find available workshops?</button>
<dd class="answer" style="display: none;">Check out the Workshops .. latest workshop offerings.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Is there a way to request a workshop that is not currently being
offered?</button>
<dd class="answer" style="display: none;">Yes, you can request a workshop that is not currently being offered by searching for the workshop, selecting the workshop and selecting the Notify Me option.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">What is the differenc...</button>
<dd class="answer" style="display: none;"> but the underlying functionalities will remain the same because it is still in Cornerstone.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">I am on the waitlist; how will I know if I have been added to the
roster?</button>
<dd class="answer" style="display: none;">If you are moved to a workshop roster from the waitlist, you will receive an email with workshop details.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I know who to go to with content questions?</button>
<dd class="answer" style="display: none;">For L&D Academy content questions, submit a case to .</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If something is incorrect on my transcript, who do I need to
contact to get it resolved?</button>
<dd class="answer" style="display: none;">To update information on your transcript, </dd>
</li>
</ul>uj5u.com熱心網友回復：
對按鈕文本執行相同的操作：
function mySearch() {
var input = document.getElementById('myInput'),
filter = input.value.toUpperCase(),
li = document.querySelectorAll(".ul li");
// Loop through all list items, and hide those who don't match the search query
for (var i = 0; i < li.length; i ) {
var a = li[i].querySelector("button");
var d = li[i].querySelector(".answer"); //get the element containing the answer
//check wether the filter matches the question or the answer
if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || d.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var acc = document.getElementsByClassName("question");
var i;
for (i = 0; i < acc.length; i ) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
}<input type="text" id="myInput" onkeyup="mySearch()" placeholder="What do you need help with?" title="search">
<ul id="myUL1" class="ul">
<li>
<button class="question" type="button" onclick="myShow()">What does on-demand learning mean?</button>
<dd class="answer" style="display: none;">On-demand learning is a...
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I get credit for the courses I take? Does The University keep track, or do I have to?</button>
<dd class="answer" style="display: none;">Credit, check! Tracking, check!
</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I visit every academy?</button>
<dd class="answer" style="display: none;">Go for it! You can visit each academy and explore their resources.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If I have technical problems, what do I do?</button>
<dd class="answer" style="display: none;">If you have technical problems, submit a case to.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Can I attend classes/workshops or take advantage of the on-demand
content while I am not at work?</button>
<dd class="answer" style="display: none;">Time spent attending classes/workshops and/or ... timesheet.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I find available workshops?</button>
<dd class="answer" style="display: none;">Check out the Workshops .. latest workshop offerings.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">Is there a way to request a workshop that is not currently being
offered?</button>
<dd class="answer" style="display: none;">Yes, you can request a workshop that is not currently being offered by searching for the workshop, selecting the workshop and selecting the Notify Me option.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">What is the differenc...</button>
<dd class="answer" style="display: none;"> but the underlying functionalities will remain the same because it is still in Cornerstone.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">I am on the waitlist; how will I know if I have been added to the
roster?</button>
<dd class="answer" style="display: none;">If you are moved to a workshop roster from the waitlist, you will receive an email with workshop details.</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">How do I know who to go to with content questions?</button>
<dd class="answer" style="display: none;">For L&D Academy content questions, submit a case to .</dd>
</li>
<li>
<button class="question" type="button" onclick="myShow()">If something is incorrect on my transcript, who do I need to
contact to get it resolved?</button>
<dd class="answer" style="display: none;">To update information on your transcript, </dd>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354097.html
標籤：javascript html