Javascript: изменение видимости, нажав на div ребенка

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 цикл и / или прослушиватель событий.

Удачи.