时间戳

首页 > 解决方案 > Javascript：通过单击 div 子项更改可见性

javascript - Javascript：通过单击 div 子项更改可见性

问题描述

代码完全独立工作，但不能与 html 的其余部分一起工作。我认为这是因为它无法找到要单击的子元素。

检查：https ://ironpatch.co/apps/customify/view/example/1823535693868?variant=14751668666412&domain=ironpatch.co

测试：点击左下角的缩略图。

document.querySelector('[data-target="1"]').addEventListener('click', function() {
  var toolbar = document.getElementById('toolbar');
  toolbar.style.visibility = "hidden";
}, false);

document.querySelector('[data-target="0"]').addEventListener('click', function() {
  var toolbar = document.getElementById('toolbar');
  toolbar.style.visibility = "visible";
}, false);
<div class="editor_thumbnail">
  <ul id="side-switcher">
    <li class="thumb product-switch"><img data-target="0" src="https://upload.wikimedia.org/wikipedia/commons/0/09/Icon_1_%28set_basic%29.png" alt="" class="tooltip img_switcher img d_block tooltipstered"></li>
    <li class="thumb product-switch"><img data-target="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Icon_2_blue.svg/1024px-Icon_2_blue.svg.png"></li>
  </ul>
</div>


<ul id="toolbar">
  <li id="tab-ref-add_image" class="tab-link" data-tab="add_image"><a href="#" class="show"><i class="material-icons">add_a_photo</i><span class="icon-text txtLang">Add Art</span></a></li>
  <li id="tab-ref-add_text" class="tab-link" data-tab="add_text"><a href="#" class="show"><i class="material-icons">font_download</i><span class="icon-text txtLang">Add Text</span></a></li>
  <li id="tab-ref-add_layer" class="tab-link" data-tab="view_layer"><a href="#" class="show"><i class="material-icons">layers</i><span class="icon-text txtLang">Layers</span></a></li>
  <li id="tab-ref-save_data" class="tab-link" data-tab="save_data"><a href="#" class="show"><i class="material-icons">save</i><span class="icon-text txtLang">Save Product</span></a></li>
  <li id="tab-ref-load_saved" class="tab-link" data-tab="load_saved"><a href="#" class="show"><i class="material-icons">assignment_turned_in</i><span class="icon-text txtLang">Load</span></a></li>
</ul>

单击棕色标签缩略图时，深灰色工具栏中的白色图标应隐藏且不起作用。

单击白色衬衫缩略图时，深灰色工具栏中的白色图标应显示并起作用。

标签： javascripthtmlcssshopify

解决方案

为什么不使用子选择器，如下所示：

// cache the toolbar
const toolbar = document.getElementById('toolbar');

// select the children elements (in this case elements with a class of ".child")
[...document.querySelectorAll("div > .child")].forEach((child) => {
  // add a click event listener to the child
  child.addEventListener("click", () => {
    // change the toolbar's visibility
    const visible = (toolbar.style.visibility === "visible");
    toolbar.style.visibility = visible ? "hidden" : "visible";
  });
});

注意：toolbar将变量缓存在循环forEach和/或事件侦听器之外。

祝你好运。

推荐阅读