getElementsByTagName在脚本位于/body之前仍返回undefined。

huangapple
go评论100阅读模式
英文:

getElementsByTagName returns undefined even with the script before /body

问题

我是一个完全不懂JavaScript的初学者，我完全被卡住了。我尝试通过调整在教程中找到的代码来创建一个搜索栏过滤系统。目标是能够按电影的名称、导演或发行年份进行过滤。

每个电影的信息分别在<h1>、<h2>和<h3>标签之间。排序是通过getElementsByTagName完成的，并且对导演和发行年份正常工作，但只要我添加电影标题，就什么都不起作用了。

从我在Firefox中看到的情况来看，导致问题的原因是我存储电影名称的变量未定义（Uncaught TypeError: a is undefined）。经过一些研究，我了解到此错误在页面加载前运行脚本时出现，因此我将其放置在</body>之前，但问题仍然存在。

我想理解我的代码有什么问题。

  1. function myFunction() {
  2.   // 声明变量
  3.   var input, filter, ul, li, a, b, c, i, title, director, date;
  4.   input = document.getElementById('myInput');
  5.   filter = input.value.toUpperCase();
  6.   ul = document.getElementById("myUL");
  7.   li = ul.getElementsByTagName('li');
  9.   // 遍历所有列表项，并隐藏不匹配搜索查询的项
  10.   for (i = 0; i < li.length; i++) {
  11.     a = li[i].getElementsByTagName("h1")[0];
  12.     b = li[i].getElementsByTagName("h2")[0];
  13.     c = li[i].getElementsByTagName("h3")[0];
  14.     title = a.textContent || a.innerText;
  15.     director = b.textContent || b.innerText;
  16.     date = c.textContent || c.innerText;
  17.     if (title.toUpperCase().indexOf(filter) > -1 || director.toUpperCase().indexOf(filter) > -1 || date.toUpperCase().indexOf(filter) > -1) {
  18.       li[i].style.display = "";
  19.     } else {
  20.       li[i].style.display = "none";
  21.     }
  22.   }
  23. }
  1. <ul id="myUL" class="gallery container">
  2.   <li>
  3.     <div class="overlay"></div>
  4.     <div class="info">
  5.       <a href="#" class="btn"><img src="example.jpg"></a>
  6.       <div class="description">
  7.         <h1 style="display:none">TITLE</h1>
  8.         <h2>DIRECTOR</h2>
  9.         <h3>DATE</h3>
  10.         <p>
  11.           SYNOPSIS
  12.         </p>
  13.       </div>
  14.     </div>
  15.     <div class="bg-img">
  16.       <img src="example2.jpg">
  17.     </div>
  18.   </li>
  19. </ul>

希望这可以帮助你找到代码中的问题。

英文:

I am a complete beginner in JavaScript and I am completely blocked. I am trying to create a search bar filtering system by adapting a code found in a tutorial. The goal is to be able to filter a list of movies by name, director or year of release.

Each of these information are respectively between tags &lt;h1&gt;, &lt;h2&gt; then &lt;h3&gt;. The sorting is done by getElementsByTagName and works as expected with the director and year of release, but as soon as I add the title of the movies, nothing works anymore.

From what I see in Firefox, the cause being that the variable in which I store the movie name is not defined (Uncaught TypeError: a is undefined). After some research, I was able to read that this error appears when the script is run before the page is loaded, so I placed it just before the /body, but the problem persists.

I would like to understand what is wrong with my code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function myFunction() {
  2.   // Declare variables
  3.   var input, filter, ul, li, a, b, c, i, title, director, date;
  4.   input = document.getElementById(&#39;myInput&#39;);
  5.   filter = input.value.toUpperCase();
  6.   ul = document.getElementById(&quot;myUL&quot;);
  7.   li = ul.getElementsByTagName(&#39;li&#39;);
  9.   // Loop through all list items, and hide those who don&#39;t match the search query
  10.   for (i = 0; i &lt; li.length; i++) {
  11.     a = li[i].getElementsByTagName(&quot;h1&quot;)[0];
  12.     b = li[i].getElementsByTagName(&quot;h2&quot;)[0];
  13.     c = li[i].getElementsByTagName(&quot;h3&quot;)[0];
  14.     title = a.textContent || a.innerText;
  15.     director = b.textContent || b.innerText;
  16.     date = c.textContent || c.innerText;
  17.     if (title.toUpperCase().indexOf(filter) &gt; -1 || director.toUpperCase().indexOf(filter) &gt; -1 || date.toUpperCase().indexOf(filter) &gt; -1) {
  18.       li[i].style.display = &quot;&quot;;
  19.     } else {
  20.       li[i].style.display = &quot;none&quot;;
  21.     }
  22.   }
  23. }

<!-- language: lang-html -->

  1. &lt;ul id=&quot;myUL&quot; class=&quot;gallery container&quot;&gt;
  2.   &lt;li&gt;
  3.     &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
  4.     &lt;div class=&quot;info&quot;&gt;
  5.       &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;&lt;img src=&quot;example.jpg&quot;&gt;&lt;/a&gt;
  6.       &lt;div class=&quot;description&quot;&gt;
  7.         &lt;h1 style=&quot;display:none&quot;&gt;TITLE&lt;/h1&gt;
  8.         &lt;h2&gt;DIRECTOR&lt;/h2&gt;
  9.         &lt;h3&gt;DATE&lt;/h3&gt;
  10.         &lt;p&gt;
  11.           SYNOPSIS
  12.         &lt;/p&gt;
  13.       &lt;/div&gt;
  14.     &lt;/div&gt;
  15.     &lt;div class=&quot;bg-img&quot;&gt;
  16.       &lt;img src=&quot;example2.jpg&quot;&gt;
  17.     &lt;/div&gt;
  18.   &lt;/li&gt;
  19. &lt;/ul&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

在原帖中，&lt;script&gt;标签位于正确位置。不幸的是，这只是解决方案的一部分。

问题

  • HTML中的&lt;input&gt;在哪里？

  • 为每个类别过滤器添加了复选框：title、director和date。

  • 使用过时的方法，如.getElementsByTagName()在[某些情况下][1]可能会有问题。相反，使用[.querySelectorAll()][2]。

  • 在window的“load”事件上调用搜索函数几乎没有意义。页面与用户之间的交互可以在&lt;input id=&quot;find&quot;&gt;或&lt;form&gt;上触发的“click”、“input”、“change”或“submit”事件上处理。在示例中，一个&lt;form&gt;包裹了所有元素，并注册了[“submit”事件][3]。

  • .textContent和.innerText几乎是[相同的][4]，使用其中之一即可。

  • &lt;h1&gt;到&lt;h6&gt;是标题，应用于按重要性排序的内容的标题。页面应只使用一个&lt;h1&gt;。将&lt;h1&gt;、&lt;h2&gt;和&lt;h3&gt;添加到每个&lt;li&gt;不仅令人讨厌，而且在语义上也很糟糕。使用CSS来调整font-size和font-weight。

示例中有注释的详细信息

注意：源代码的某些部分带有仅供演示目的的标签，这不是必需的，只是用来生成&lt;ul&gt;的内容。

  1. // 仅供演示目的
  2. const data = [{
  3.   "title": "Plain Dirty (a.k.a. Briar Patch)",
  4.   "director": "Jodi MacEllen",
  5.   "date": "7/16/2018"
  6. }, {
  7.   "title": "Cake",
  8.   "director": "Faber Pude",
  9.   "date": "5/3/2012"
  10. }, {
  11.   "title": "Exit Smiling",
  12.   "director": "Bryant Whytock",
  13.   "date": "1/26/1972"
  14. }, {
  15.   "title": "Mission: Impossible III",
  16.   "director": "Allison Kayzer",
  17.   "date": "5/14/1986"
  18. }, {
  19.   "title": "Hollywood Between Paranoia and Sci-Fi. The Power of Myth",
  20.   "director": "Isacco Yoell",
  21.   "date": "3/14/1980"
  22. }, {
  23.   "title": "Barabbas",
  24.   "director": "Humfrid Scandrett",
  25.   "date": "6/12/2018"
  26. }, {
  27.   "title": "Stolen (Stolen Lives)",
  28.   "director": "Harv Ginman",
  29.   "date": "2/19/2014"
  30. }, {
  31.   "title": "Casper",
  32.   "director": "Ferne Nester",
  33.   "date": "9/20/2011"
  34. }, {
  35.   "title": "Journey to the Beginning of Time",
  36.   "director": "Dodi Chaster",
  37.   "date": "12/4/2014"
  38. }, {
  39.   "title": "Home Run",
  40.   "director": "Nonna Bugler",
  41.   "date": "5/4/1972"
  42. }];
  44. // 引用&lt;ul&gt;
  45. const list = document.querySelector("ul");
  47. // 仅供演示目的
  48. data.forEach(movie => {
  49.   const li = `<li><i>${movie.title}</i> - 
  50.               <b>${movie.director}</b> - 
  51.               <time>${movie.date}</time></li>`;
  52.   list.insertAdjacentHTML("beforeend", li);
  53. });
  55. // 引用&lt;form&gt;
  56. const F = document.forms.main;
  57. // 引用所有&lt;input&gt;和&lt;fieldset&gt;
  58. const fc = F.elements;
  59. // 引用&lt;input id=&quot;find&quot;&gt;
  60. const find = fc.find;
  61. // 将所有[name=&quot;chx&quot;]的HTMLCollection转换为数组
  62. const filters = Array.from(fc.chx);
  63. // 将所有&lt;li&gt;转换为NodeList，然后转换为数组
  64. const items = Array.from(document.querySelectorAll("li"));
  65. // 注册&lt;form&gt;到“submit”事件
  66. F.onsubmit = searchList;
  68. // 事件处理程序传递事件对象
  69. function searchList(event) {
  70.   // 阻止&lt;form&gt;重定向页面
  71.   event.preventDefault();
  72.   /**
  73.    * 从&lt;input id=&quot;find&quot;&gt;获取用户搜索词
  74.    * 将字符串转换为数组。
  75.    */
  76.   const keywords = find.value.toLowerCase().split(" ");
  77.   // 隐藏所有&lt;li&gt;
  78.   items.forEach(li => li.style.display = "none");
  79.   // 获取每个已选复选框的索引号数组
  80.   const checked = filters.flatMap((chx, idx) => chx.checked ? idx : []);
  81.   /**
  82.    * 对于每个&lt;li&gt;...
  83.    * ...从&lt;li&gt;中的&lt;i&gt;、&lt;b&gt;和&lt;time&gt;中获取文本的数组...
  84.    * ...创建一个仅包含与已检查数组中的数字匹配的索引的文本的数组，然后将其转换为字符串...
  85.    * ...如果搜索词中的一个也在当前&lt;li&gt;的文本中...
  86.    * ...显示&lt;li&gt;
  87.    */
  88.   items.forEach(li => {
  89.     let text = Array.from(li.children).map(ele => ele.textContent.toLowerCase());
  90.     let filtered = text.filter((txt, cnt) => checked.includes(cnt)).join("");
  92.     if (keywords.some(word => filtered.includes(word))) {
  93.       li.style.display = "list-item";
  94.     }
  95.   });
  96. }
  1. :root {
  2.   font: 2ch/1.15 "Segoe UI";
  3. }
  5. fieldset {
  6.   padding-right: 20px;
  7. }
  9. input {
  10.   font: inherit;
  11.   height: 3.5ex;
  12. }
  14. #find {
  15.   width: 80%;
  16.   margin: 15px 0 0 25px;
  17. }
  19. [type="submit"] {
  20.   font-variant: small-caps;
  21.   cursor: pointer;
  22. }
  24. menu,
  25. label {
  26.   display: flex;
  27.   align-items: center;
  28.   margin-left: 15px;
  29. }
  31. menu
  33. <details>
  34. <summary>英文:</summary>
  36. In the OP, the `&lt;script&gt;` tag is in the correct place. Unfortunately, that was only a part of the solution.
  38. Problems
  39. -
  41. - Where&#39;s the `&lt;input&gt;` in the HTML?
  43. - Added a checkbox for each category filter: `title`, `director`, and `date`.
  45. - Using antiquated methods such as `.getElementsByTagName()` can be problematic under [certain circumstances][1]. Instead, use [`.querySelectorAll()`][2]. 
  47. - Calling the search function on &quot;load&quot; event of `window` makes very little sense. The interaction between the page and user can be handled on a &quot;click&quot;, &quot;input&quot;, &quot;change&quot;, or &quot;submit&quot; event triggered on either the `&lt;input id=&quot;find&quot;&gt;` or a `&lt;form&gt;`. In the example, a `&lt;form&gt;` is wrapped around all of the elements and is registered to the [&quot;submit&quot; event][3]. 
  49. - `.textContent` and `.innerText` are [almost identical][4], use one or the other.
  51. - `&lt;h1&gt;` thru `&lt;h6&gt;` are headings and should be used for titles of content organized in the order of importance. Only a single `&lt;h1&gt;` should be used for a page. Adding `&lt;h1&gt;`, `&lt;h2&gt;`, and `&lt;h3&gt;` to each `&lt;li&gt;` is not only an eyesore but it&#39;s semantically horrible as well. Use CSS to adjust `font-size` and `font-weight` instead.
  53. **Details are commented in example**
  55. **Note:** There are parts of the source labeled with *For demo purposes*, which is not required and is there just to generate the content for the `&lt;ul&gt;`.
  57. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  59. &lt;!-- language: lang-js --&gt;
  61.     // For demo purposes
  62.     const data = [{
  63.       &quot;title&quot;: &quot;Plain Dirty (a.k.a. Briar Patch)&quot;,
  64.       &quot;director&quot;: &quot;Jodi MacEllen&quot;,
  65.       &quot;date&quot;: &quot;7/16/2018&quot;
  66.     }, {
  67.       &quot;title&quot;: &quot;Cake&quot;,
  68.       &quot;director&quot;: &quot;Faber Pude&quot;,
  69.       &quot;date&quot;: &quot;5/3/2012&quot;
  70.     }, {
  71.       &quot;title&quot;: &quot;Exit Smiling&quot;,
  72.       &quot;director&quot;: &quot;Bryant Whytock&quot;,
  73.       &quot;date&quot;: &quot;1/26/1972&quot;
  74.     }, {
  75.       &quot;title&quot;: &quot;Mission: Impossible III&quot;,
  76.       &quot;director&quot;: &quot;Allison Kayzer&quot;,
  77.       &quot;date&quot;: &quot;5/14/1986&quot;
  78.     }, {
  79.       &quot;title&quot;: &quot;Hollywood Between Paranoia and Sci-Fi. The Power of Myth&quot;,
  80.       &quot;director&quot;: &quot;Isacco Yoell&quot;,
  81.       &quot;date&quot;: &quot;3/14/1980&quot;
  82.     }, {
  83.       &quot;title&quot;: &quot;Barabbas&quot;,
  84.       &quot;director&quot;: &quot;Humfrid Scandrett&quot;,
  85.       &quot;date&quot;: &quot;6/12/2018&quot;
  86.     }, {
  87.       &quot;title&quot;: &quot;Stolen (Stolen Lives)&quot;,
  88.       &quot;director&quot;: &quot;Harv Ginman&quot;,
  89.       &quot;date&quot;: &quot;2/19/2014&quot;
  90.     }, {
  91.       &quot;title&quot;: &quot;Casper&quot;,
  92.       &quot;director&quot;: &quot;Ferne Nester&quot;,
  93.       &quot;date&quot;: &quot;9/20/2011&quot;
  94.     }, {
  95.       &quot;title&quot;: &quot;Journey to the Beginning of Time&quot;,
  96.       &quot;director&quot;: &quot;Dodi Chaster&quot;,
  97.       &quot;date&quot;: &quot;12/4/2014&quot;
  98.     }, {
  99.       &quot;title&quot;: &quot;Home Run&quot;,
  100.       &quot;director&quot;: &quot;Nonna Bugler&quot;,
  101.       &quot;date&quot;: &quot;5/4/1972&quot;
  102.     }];
  104.     // Reference &lt;ul&gt;
  105.     const list = document.querySelector(&quot;ul&quot;);
  107.     // For demo purposes
  108.     data.forEach(movie =&gt; {
  109.       const li = `&lt;li&gt;&lt;i&gt;${movie.title}&lt;/i&gt; - 
  110.                   &lt;b&gt;${movie.director}&lt;/b&gt; - 
  111.                   &lt;time&gt;${movie.date}&lt;/time&gt;&lt;/li&gt;`;
  112.       list.insertAdjacentHTML(&quot;beforeend&quot;, li);
  113.     });
  115.     // Reference the &lt;form&gt;
  116.     const F = document.forms.main;
  117.     // Reference all &lt;input&gt; and &lt;fieldset&gt;
  118.     const fc = F.elements;
  119.     // Reference &lt;input id=&quot;find&quot;&gt;
  120.     const find = fc.find;
  121.     // Make HTMLCollection of all [name=&quot;chx&quot;] into an array
  122.     const filters = Array.from(fc.chx);
  123.     // Make NodeList of all &lt;li&gt; then into an array
  124.     const items = Array.from(document.querySelectorAll(&quot;li&quot;));
  125.     // Register &lt;form&gt; to &quot;submit&quot; event
  126.     F.onsubmit = searchList;
  128.     // Event handler passes Event Object
  129.     function searchList(event) {
  130.       // Stop &lt;form&gt; from redirecting page
  131.       event.preventDefault();
  132.       /**
  133.        * Get user search words from &lt;input id=&quot;find&quot;&gt;
  134.        * Convert string into an array.
  135.        */
  136.       const keywords = find.value.toLowerCase().split(&quot; &quot;);
  137.       // Hide all &lt;li&gt;
  138.       items.forEach(li =&gt; li.style.display = &quot;none&quot;);
  139.       // Get an array of index numbers of each checked checkbox
  140.       const checked = filters.flatMap((chx, idx) =&gt; chx.checked ? idx : []);
  141.       /**
  142.        * For each &lt;li&gt;...
  143.        * ...Make an array (text) of text from &lt;i&gt;, &lt;b&gt;, and &lt;time&gt; in &lt;li&gt;...
  144.        * ...Make an array (filtered) of texts of only index that 
  145.        * match the numbers in checked array and convert it into a string...
  146.        * ...If one of the search words is also in the text of the current &lt;li&gt;...
  147.        * ...show the &lt;li&gt;
  148.        */
  149.       items.forEach(li =&gt; {
  150.         let text = Array.from(li.children).map(ele =&gt; ele.textContent.toLowerCase());
  151.         let filtered = text.filter((txt, cnt) =&gt; checked.includes(cnt)).join(&quot;&quot;);
  153.         if (keywords.some(word =&gt; filtered.includes(word))) {
  154.           li.style.display = &quot;list-item&quot;;
  155.         }
  156.       });
  157.     }
  159. &lt;!-- language: lang-css --&gt;
  161.     :root {
  162.       font: 2ch/1.15 &quot;Segoe UI&quot;;
  163.     }
  165.     fieldset {
  166.       padding-right: 20px;
  167.     }
  169.     input {
  170.       font: inherit;
  171.       height: 3.5ex;
  172.     }
  174.     #find {
  175.       width: 80%;
  176.       margin: 15px 0 0 25px;
  177.     }
  179.     [type=&quot;submit&quot;] {
  180.       font-variant: small-caps;
  181.       cursor: pointer;
  182.     }
  184.     menu,
  185.     label {
  186.       display: flex;
  187.       align-items: center;
  188.       margin-left: 15px;
  189.     }
  191.     menu {
  192.       list-style: none;
  193.       margin-left: -15px;
  194.     }
  196. &lt;!-- language: lang-html --&gt;
  198.     &lt;form id=&quot;main&quot;&gt;
  199.       &lt;fieldset&gt;
  200.         &lt;legend&gt;Search by keywords delimited by a space&lt;/legend&gt;
  201.         &lt;input id=&quot;find&quot; placeholder=&quot;x the 2018&quot; type=&quot;search&quot;&gt;&lt;input type=&quot;submit&quot; value=&quot;Find&quot;&gt;
  202.         &lt;menu&gt;Filters:&amp;nbsp;
  203.           &lt;label&gt;&lt;input name=&quot;chx&quot; type=&quot;checkbox&quot; checked&gt; Title &lt;/label&gt;
  204.           &lt;label&gt;&lt;input name=&quot;chx&quot; type=&quot;checkbox&quot; checked&gt; Director &lt;/label&gt;
  205.           &lt;label&gt;&lt;input name=&quot;chx&quot; type=&quot;checkbox&quot; checked&gt; Date &lt;/label&gt;
  206.         &lt;/menu&gt;
  207.         &lt;ul&gt;&lt;/ul&gt;
  208.       &lt;/fieldset&gt;
  209.     &lt;/form&gt;
  211. &lt;!-- end snippet --&gt;
  214.   [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
  215.   [2]: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
  216.   [3]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
  217.   [4]: https://www.microfocus.com/documentation/silk-test/200/en/silktestworkbench-help-en/SILKTEST-21EEFF3F-DIFFERENCEBETWEENTEXTCONTENTSINNERTEXTINNERHTML-REF.html
  219. </details>
  223. # 答案2
  224. **得分**: 0
  226. 你可以在代码中添加 `window.onload` 来调用你的函数，这意味着只有在页面加载完成后才会触发你的函数。
  228. ```javascript
  229. window.onload = function() {
  230.   myFunction();
  231. };
  233. function myFunction() {
  234.   // 声明变量
  235.   var input, filter, ul, li, a, b, c, i, title, director, date;
  236.   ul = document.getElementById("myUL");
  237.   li = ul.getElementsByTagName('li');
  239.   // 循环遍历所有列表项，并隐藏不匹配搜索查询的项
  240.   for (i = 0; i < li.length; i++) {
  241.     a = li[i].getElementsByTagName("h1")[0];
  242.     b = li[i].getElementsByTagName("h2")[0];
  243.     c = li[i].getElementsByTagName("h3")[0];
  244.     title = a.textContent || a.innerText;
  245.     director = b.textContent || b.innerText;
  246.     date = c.textContent || c.innerText;
  247.     console.log(title, director, date);
  249.     if (title.toUpperCase().indexOf(filter) > -1 || director.toUpperCase().indexOf(filter) > -1 || date.toUpperCase().indexOf(filter) > -1) {
  250.       li[i].style.display = "";
  251.     } else {
  252.       li[i].style.display = "none";
  253.     }
  254.   }
  255. }
  1. <ul id="myUL" class="gallery container">
  2.   <li>
  3.     <div class="overlay"></div>
  4.     <div class="info">
  5.       <a href="#" class="btn"><img src="https://picsum.photos/200"></a>
  6.       <div class="description">
  7.         <h1 style="display:none">TITLE</h1>
  8.         <h2>DIRECTOR</h2>
  9.         <h3>DATE</h3>
  10.         <p>
  11.           SYNOPSIS
  12.         </p>
  13.       </div>
  14.     </div>
  15.     <div class="bg-img">
  16.       <img src="https://picsum.photos/200">
  17.     </div>
  18.   </li>
  19. </ul>

这是你提供的代码的翻译部分。

英文:

you could add windoe.onload to call your function, meaning only when page is loaded your function will fire.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. window.onload = function() {
  2. myFunction();
  3. };
  4. function myFunction() {
  5. // Declare variables
  6. var input, filter, ul, li, a, b, c, i, title, director, date;
  7. ul = document.getElementById(&quot;myUL&quot;);
  8. li = ul.getElementsByTagName(&#39;li&#39;);
  9. // Loop through all list items, and hide those who don&#39;t match the search query
  10. for (i = 0; i &lt; li.length; i++) {
  11. a = li[i].getElementsByTagName(&quot;h1&quot;)[0];
  12. b = li[i].getElementsByTagName(&quot;h2&quot;)[0];
  13. c = li[i].getElementsByTagName(&quot;h3&quot;)[0];
  14. title = a.textContent || a.innerText;
  15. director = b.textContent || b.innerText;
  16. date = c.textContent || c.innerText;
  17. console.log(title, director, date);
  18. if (title.toUpperCase().indexOf(filter) &gt; -1 || director.toUpperCase().indexOf(filter) &gt; -1 || date.toUpperCase().indexOf(filter) &gt; -1) {
  19. li[i].style.display = &quot;&quot;;
  20. } else {
  21. li[i].style.display = &quot;none&quot;;
  22. }
  23. }
  24. }

<!-- language: lang-html -->

  1. &lt;ul id=&quot;myUL&quot; class=&quot;gallery container&quot;&gt;
  2. &lt;li&gt;
  3. &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
  4. &lt;div class=&quot;info&quot;&gt;
  5. &lt;a href=&quot;#&quot; class=&quot;btn&quot;&gt;&lt;img src=&quot;https://picsum.photos/200&quot;&gt;&lt;/a&gt;
  6. &lt;div class=&quot;description&quot;&gt;
  7. &lt;h1 style=&quot;display:none&quot;&gt;TITLE&lt;/h1&gt;
  8. &lt;h2&gt;DIRECTOR&lt;/h2&gt;
  9. &lt;h3&gt;DATE&lt;/h3&gt;
  10. &lt;p&gt;
  11. SYNOPSIS
  12. &lt;/p&gt;
  13. &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;bg-img&quot;&gt;
  16. &lt;img src=&quot;https://picsum.photos/200&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/li&gt;
  19. &lt;/ul&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月21日 23:36:07
  • 转载请务必保留本文链接：https://go.coder-hub.com/76300669.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定