“弹出图像” - 弹出后无法重新隐藏图像

Question

您好，我目前有一个button_to 和一个名为basic(1).png 的图像，我想进行放大显示。当点击图片时，更大的克隆将show。这目前有效！但是，当我单击cloned image 时，我希望能够再次隐藏cloned image。

• 如何在点击时隐藏第二个克隆图像？

<script type="text/javascript">
  $(function() {
    $('#background-image-basic1').hide();
  });
</script>

<div id="basic-1" style="height:100%;width:50%;display:inline-block;float:right;">
  <%= button_to 'javascript:;', :class => "view-popover1", :rel => "popover" do %>

    <%= image_tag("basic(1).png", :alt => "basic(1).png", class: "img-responsive ", style:"border-radius:6px;" ) %>

      <% end %>
</div>


<%= button_to 'javascript:;', :class => 'background-image-basic1', :rel => "popover", :id => "background-image-basic1" do %>
  <%= image_tag("basic(1).png", :alt => "basic(1).png", class:"img-responsive thumbnail-instructions ", style:"border-radius:6px;" ) %>
    <% end %>


      
      <script type="text/javascript">
        $('.view-popover1').click(function() {
            $('#background-image-basic1').show();
          }),
          $('.background-image-basic1').click(function() {
            $('#background-image-basic1').hide();
          });
      </script>

Answer 1

错误

<%= button_to %>

正确

<%= link_to %>