Question

代码可以完美地独立运行，但不能与其他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>

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

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

Answer 1

为什么不使用子选择器，像这样：

// 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变量外部。< / p>

祝你好运。

Javascript：通过单击div child更改可见性

1 个答案: