Question

我正在开发一个Ruby on Rails应用程序，我试图添加一个隐藏带有一些Id的div的隐藏/显示按钮。我已按照this帖子中的步骤操作，并隐藏了内容（第二个答案）。问题是内容不会永久隐藏。一旦我点击按钮，内容消失，然后浏览器执行类似自动刷新的操作，内容再次出现。

有人可以帮我吗？这是我的第一个应用程序，我在javascript中的背景很差......

我要隐藏/显示的代码如下：

<div id='test'>
  <div class="col_4 patients-list">
    <!-- Patients list -->
    <h5>Patients en cours: <%= @patients.size %></h5>
    <div>
      <% @patients_anomaly.each do |patient| %>
        <div class="patient-anomaly"><%= link_to_patient patient %></div>
      <% end %>
      <% (@patients_to_exit - @patients_anomaly).each do |patient| %>
        <div class="patient-to-exit"><%= link_to_patient patient %></div>
      <% end %>
      <% @patients_normal.each do |patient| %>
        <div class="patient-normal"><%= link_to_patient patient %></div>
      <% end %>
    </div>
  </div>
</div>
<button>Click</button>

按钮的javascript是：

<script type="text/javascript">
  $("button").click(function() {
    $("#test").toggle('hide');
  });
</script>

提前谢谢。

Answer 1

I see that you tagged jQuery, did you try $('#element').hide() and $('#element').show() ?

Documentation for show, Documentation for hide

Answer 2

You can set type="button" to button because default behavior is submit which submits the page so page is shown in default state.

<button type="button">Click</button>

Answer 3

Instead of this <button>Click</button>, add this

= link_to 'Hide', 'javascript:void(0);', id: 'hideContent'

Then in Javascript

$('#hideContent').on('click', function(){
  $('#test').toggle('hide');
});

This won't reload your page.

Hope that helps!

Answer 4

<div id='test'></div>
<button id="hide_show">Click</button>
<script>
  $('#hide_show"').click(function(){
    $('#test').toggle();
  });
</script>

HTML JavaScript隐藏/显示按钮

4 个答案: