点击显示？
[英]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.