点击显示？
[英]Click and show?
问题描述
I am working with this:
我正在处理这个：
<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>
Essentially click one line item, hide all blocks, and then show the named block.基本上单击一个行项目，隐藏所有块，然后显示命名块。 This should be simple but I have been researching for hours and getting nowhere.这应该很简单，但我已经研究了几个小时却一无所获。
Thanks in advance!提前致谢！ - Joe - 乔
2 个解决方案
解决方案1
1 2020-03-13 03:18:03
You have some typos in your code.您的代码中有一些拼写错误。
Firstly, you are wrongly closing li element with </p>首先，您错误地使用</p>关闭了li元素
Secondly, getElementsBytagname should be getElementsByTagName and getelementbyid should be getElementById :其次， 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>
You can also try using querySelectorAll() and forEach() that does not require the loop variable i :您还可以尝试使用不需要循环变量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
Event Handlers事件处理程序
There's three ways to handle an event (in this case the click event on <ol> ):有三种处理事件的方法（在本例中为<ol>上的 click 事件）：
Event Attribute (not recommended)
事件属性（不推荐）<ol onclick="eventHandler(); return false">...</ol>Event Property
事件属性document.querySelector('ol').onclick = eventHandler;Event Listener (recommended)
事件监听器（推荐）document.querySelector('ol').addEventListener('click', eventHandler);
For details refer to Introduction to Events and DOM Onevent Handlers有关详细信息，请参阅事件和DOM Oneevent 处理程序简介
Event Delegation事件委托
The following demo uses a programming paradigm called Event Delegation .以下演示使用称为事件委托的编程范式。 The advantages over the code provided in OP ( O riginal P ost) are:过在所提供的码的优点OP （O riginal P OST）为：
Only one tag needs to be registered as the event listener (common ancestor tag of all targeted tags - ex.
<ol>is an ancestor tag to all<li>).只需将一个标签注册为事件侦听器（所有目标标签的共同祖先标签 - 例如<ol>是所有<li>的祖先标签）。There's no need to loop thru each targeted tag and register each one to an event (ex.
<li>do not have to be in aforloop).无需遍历每个目标标签并将每个标签注册到事件（例如<li>不必在for循环中）。There can be an unlimited number of targeted tags and knowing how many is not required.
可以有无限数量的目标标签，并且知道不需要多少。 (ex. there can be a single <li>to theoretically thousands of<li>).（例如，理论上可以有一个<li>到数千个<li>）。The targeted tags can be added dynamically anytime -- during or after page load.
目标标签可以随时动态添加 - 在页面加载期间或之后。 If done any other way, any dynamically added tags would not work without reloading the page and somehow keeping them.如果以任何其他方式完成，任何动态添加的标签都将无法在不重新加载页面并以某种方式保留它们的情况下工作。
Refer to Event Delegation for details.有关详细信息，请参阅事件委托。
References参考
In the following demo these methods and properties were used:在以下演示中，使用了这些方法和属性：
DOM DOM
Event事件
Demo演示
Details are commented in demo详情见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.