如何在点击按钮时隐藏面板？

When the submit button is clicked I want the panel-default to have opacity: 0 for that respective inspiration:

单击提交按钮时，我希望panel-default具有不透明度：0表示相应的灵感：

<% @inspirations.each do |inspiration| %> # List of featured inspirations for user to choose from
  <%= simple_form_for(current_user.inspirations.build) do |f| %>
    <div class="panel panel-default"> # Once user clicks pushpin I want the inspiration he clicked to get opacity 0
      <%= button_tag(type: 'submit', class: 'button-bitches') do %>
        <span class="glyphicon glyphicon-pushpin"></span>
      <% end %>
      <%= f.hidden_field :name, value: inspiration.name %>
      <%= inspiration.name %>
    </div>
  <% end %>
<% end %>

UPDATE 1

I can now make the button disappear when clicked, but I still can't get the panel to disappear.

我现在可以让按钮在点击时消失，但我仍然无法让面板消失。

<script>
    $('.button-bitches').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });
</script>

css

CSS

.panel-default.active {
  opacity: 0;
}

.button-bitches.active {
  opacity: 0;
}

UPDATE 2

This will give .panel-default opacity 0, which is what I want, but it will do it for every inspiration. I want it to just to do for the inspiration that was clicked.

这将给出.panel-default opacity 0，这是我想要的，但它会为每个灵感做到这一点。我希望它只是为了点击的灵感。

$('.button-bitches').click(function(){
    if($(this).hasClass('active')){
        $('.panel-default').removeClass('active')
    } else {
        $('.panel-default').addClass('active')
    }
});

2 个解决方案

#1

I see that the button is the child of the panel-default, you should try this:

我看到按钮是面板默认的子项，你应该试试这个：

$('.button-bitches').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).parents('.panel-default').removeClass('active');
        } else {
            $(this).addClass('active');
            $(this).parents('.panel-default').addClass('active');
        }
    });

This could also be shortened to:

这也可以缩短为：

$('.button-bitches').click(function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active')
                       .parents('.panel-default').removeClass('active');
            } else {
                $(this).addClass('active')
                       .parents('.panel-default').addClass('active');
            }
        });

Or you could toggle the active class

或者您可以切换活动类

        $('.button-bitches').click(function(){
                $(this).toggleClass('active')
                       .parents('.panel-default').toggleClass('active');
        });

PS: I didn't test it, but I am pretty sure it will work as long as the button is the child of the .panel-default and your CSS is correct.

PS：我没有测试它，但我很确定只要按钮是.panel-default的子项并且你的CSS是正确的，它就能工作。

#2

could please try this one.

请试试这个。

<div class="panel panel-default" id="hidepanel">....</div>

<span class="glyphicon glyphicon-pushpin" onclick="hidediv();"></span>

Javascript file:

Javascript文件：

function hidediv() {
document.getElementById("hidepanel").style.opacity = "0";}

Please change css like this

请改变这样的CSS

.panel-default:active {
  opacity: 0;
 }

 .button-bitches:active {
    opacity: 0;
 }

#1