點擊顯示？
[英]Click and show?
問題描述
我正在處理這個：
<html> <ol onclick="myevent(event);"> <li title="a">Test 1</p> <li title="b">Test 2</p> </ol> <div id="a" style="display:none;">Text to show</div> <div id="b" style="display:none;">Other text to show</div> <script> function myevent(event) { var x, i, clk, res; x = document.getElementsByTagName("DIV"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } clk = event.target.title; res = document.getElementById(clk); res.style.display = "block"; } </script> </html>
基本上單擊一個行項目，隱藏所有塊，然后顯示命名塊。 這應該很簡單，但我已經研究了幾個小時卻一無所獲。
提前致謝！ - 喬
2 個解決方案
解決方案1
1 2020-03-13 03:18:03
您的代碼中有一些拼寫錯誤。
首先，您錯誤地使用</p>關閉了li元素
其次， getElementsBytagname應該是getElementsByTagName並且getelementbyid應該是getElementById ：
function myevent(event){ var x, i, clk, res; x = document.getElementsByTagName("DIV"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } clk = event.target.title; res = document.getElementById(clk); res.style.display="block"; }
<ol onclick="myevent(event);"> <li title="a">Test 1</li> <li title="b">Test 2</li> </ol> <div id="a" style="display:none;">Text to show</div> <div id="b" style="display:none;">Other text to show</div>
您還可以嘗試使用不需要循環變量i querySelectorAll()和forEach() ：
function myevent(e){ var x, clk, res; x = document.querySelectorAll("DIV"); x.forEach(div => div.style.display = "none"); clk = e.target.title; res = document.getElementById(clk); res.style.display="block"; }
<ol onclick="myevent(event);"> <li title="a">Test 1</li> <li title="b">Test 2</li> </ol> <div id="a" style="display:none;">Text to show</div> <div id="b" style="display:none;">Other text to show</div>
解決方案2
0 2020-03-13 05:37:26
事件處理程序
有三種處理事件的方法（在本例中為<ol>上的 click 事件）：
事件屬性（不推薦）
<ol onclick="eventHandler(); return false">...</ol>事件屬性
document.querySelector('ol').onclick = eventHandler;事件監聽器（推薦）
document.querySelector('ol').addEventListener('click', eventHandler);
有關詳細信息，請參閱事件和DOM Oneevent 處理程序簡介
事件委托
以下演示使用稱為事件委托的編程范式。 過在所提供的碼的優點OP （O riginal P OST）為：
只需將一個標簽注冊為事件偵聽器（所有目標標簽的共同祖先標簽 - 例如
<ol>是所有<li>的祖先標簽）。無需遍歷每個目標標簽並將每個標簽注冊到事件（例如
<li>不必在for循環中）。可以有無限數量的目標標簽，並且知道不需要多少。 （例如，理論上可以有一個
<li>到數千個<li>）。目標標簽可以隨時動態添加 - 在頁面加載期間或之后。 如果以任何其他方式完成，任何動態添加的標簽都將無法在不重新加載頁面並以某種方式保留它們的情況下工作。
有關詳細信息，請參閱事件委托。
參考
在以下演示中，使用了這些方法和屬性：
DOM
事件
演示
詳情見demo
/* EVENT DELEGATION */ // Register Ancestor Tag to Event /* Register the click event to a common ancestor tag of all tags you want to be clickable. So in this instance the clickable tags are all <li> Ancestor tags could be: window document <body> <main> <ol> Usually the closest tag is the best choice which is <ol> */ // ------ Breakdown ------ /* document.querySelector('ol') -- find <ol> .addEventListener('click'... -- register click event to <ol> ..., eventHandler); -- run function eventHandler() when <ol> is clicked */ document.querySelector('ol').addEventListener('click', eventHandler); // Event Object /* Pass event object which will have properties and methods that will allow us to: 1. find what tag is listening for click event - event.currentTarget - in this demo it is <ol> 2. find what tag the user actually clicked - event.target - in this demo only <li> will react to being clicked 3. stop the click event from "bubbling" up the event chain - event.stopPropagation(); - this method is called at the end of eventHandler() so that the click event doesn't trigger anything else */ function eventHandler(event) { // Reference all tags concerned // See Event Object #1 const listener = event.currentTarget; // See Event Object #2 const clicked = event.target; // Find <output> const display = document.querySelector('output'); // ------ Breakdown ------ /* if <ol> isn't the tag that the user clicked... ... and if the clicked tag is a <li>... ... get the text inside that <li>... ... and place it in <output> (it gets overwritten on each click so there's no need for multiple tags) */ if (listener !== clicked) { if (clicked.tagName === 'LI') { let data = clicked.textContent; display.textContent = data; } } /* Regardless of whether any <li> were clicked stop the click event See Event Object #3 */ event.stopPropagation(); }
main { font: 700 1rem/1.5 Tahoma } li:hover { cursor: pointer }
<main> <ol> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> </ol> Item: <output></output> </main>
如何點擊顯示和點擊呼叫？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.