如果沒有內容，如何隱藏引導程序警報？

Question

我有一個引導程序警報，如果里面沒有文字，它應該隱藏。 我能夠使警報不占據整個屏幕，但剩下的是頁面頂部的一小部分。 我一直在嘗試我在這里找到的這段代碼（ 如何在沒有消息時隱藏 Bootstrap 警報框）但是發生了這種情況。

這是代碼：

<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 %>會將其打印到視圖中。