如果没有内容，如何隐藏引导警报？

Question

我有一个引导警报，如果里面没有文字，它应该隐藏。我能够使警报不占用整个屏幕，但剩下的就是页面顶部的这一小部分。我一直在尝试这里找到的代码（How to hide Bootstrap alert box when no message），但这件事发生了.

这是代码：

<script type="text/javascript">
$(document).ready(function () {
    if (<%= notice %>.length != 0) {
    $("#notice span").text(<%= notice %>);
    $("#notice").show();
}
else {
    $("#notice").hide();
}
});
</script>

<div id="notice" style="text-align: center;">
<span role="alert" class="alert alert-success">
<%= notice %>
</span>
</div>

编辑：<％notice％>是警报文本，＃notice是div的id

Answer 1

你可以简单地在没有jQuery的情况下，你不需要jQuery，如下所示

<% if notice.present? %>
  <div id="notice" style="text-align: center;">
    <span role="alert" class="alert alert-success">
        <%= notice %>
    </span>
  </div>
<% end %>

如果你的控制器闪存是你可以这个类动态，如alert，notice，success，danger

flash[:alert] = 'Model was successfully created.'
or
flash[:notice] = 'Model was successfully created.'
or
flash[:success] = 'Model was successfully created.'
or
flash[:danger] = 'Model was successfully created.'

现在你的flash部分将是

<% flash.each do |name, msg| %>
    <div id="notice" style="text-align: center;">
        <span role="alert" class="alert alert-<%="#{name}" %>">
        <p><%= msg if msg.is_a?(String) %></p>
    </span>
<% end %>

而已。

希望能帮到你。

Answer 2

尝试，

<script type="text/javascript">
  $(document).ready(function () {
    if ($('#notice>span').html().length>0) {
      $("#notice").show();
    } else {
      $("#notice").hide();
    }
  });
</script>

您不需要从javascript设置值，<%= notice %>会将其打印到视图中。