0

Having this error on on a Shopify app.Trying to get dark grey toolbar to be hidden when the second thumbnail image is clicked on. Getting the error stated in the title. 

     $(function() {
$('[data-target="1"]').click(function() {
  document.getElementById('toolbar').style.opacity = '0';
   });
       });


<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>
Lake
  • 89
  • 8

1 Answers1

1

select $('[data-target="1"]') withot use "" in attribute value as $('[data-target=1]')

(use Jquery to set css)

$(function() {
  $('[data-target=1]').click(function() {
    $('#toolbar').css("opacity",'0');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47