javascript - 针对数据值(value)问题

Question

在 Shopify 应用程序上出现此错误。尝试在单击第二个缩略图时隐藏深灰色工具栏。得到标题中所述的错误。

     $(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>

Answer 1

选择 $('[data-target="1"]') 而不是在属性值中使用 "" 作为 $('[data-target =1]')

(使用Jquery设置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>