如何显示引导警报

Question

我正在尝试添加 Bootstrap Alerts，但无法以编程方式显示它们。

这是 HTML 部分：

<div
  class="alert alert-success alert-dismissible fade show"
  role="alert"
  id="accepted-meal-alert">
  <button type="button" class="close">&times;</button>
  <p>Genial que te haya gustado la idea!</p>
</div>

CSS：

#accepted-meal-alert {
  display: none;
}

还有 JavaScript。我正在尝试使用 jQuery 来切换 div 的可见性：

function acceptOrGetAnotherMeal(acceptOrReject) {
  if (acceptOrReject == 'accept-btn') {
    showMealAccepted();
  } else {
    const alternativeTextPrefix = 'Entonces pidamos';
    let mealType = $("input[name='categorias']:checked").val();
    console.log(`mealType: ${mealType}`);
    getFromEndpoint(mealType, alternativeTextPrefix);
  }
}

function showMealAccepted() {
  console.log('showMealAccepted');
  $('#accepted-meal-alert').show();             // `toggle` didn't work as well.
  // $('#accepted-meal-alert').css({
  //   display: 'block',
  // });
  $('#accept-btn').prop('disabled', true);
  $('#reject-btn').prop('disabled', true);
}

$(document).ready(function () {
  $('.categorias').click(function () {
    let endpoint = $(this).attr('id');
    getFromEndpoint(endpoint, defaultTextPrefix);
  });
  $('.accept-reject-btn').click(function () {
    let acceptOrReject = $(this).attr('id');
    console.log('Clicked categories with value: ' + acceptOrReject);
    acceptOrGetAnotherMeal(acceptOrReject);
  });
  $('.alert .close').click(function (e) {
    $(this).parent().hide();
  });
});

如果这有什么不同，我将从 Sinatra 公用文件夹中提供这些文件。

Answer 1

首先请通过放置日志语句检查 JavaScript 是否正在加载，然后查看是否为 click 事件触发了 '.accept-reject-btn'。

试试下面的 JavaScript：

function acceptOrGetAnotherMeal(acceptOrReject) {
    if (acceptOrReject == 'accept-btn') {
        console.log( 'Meal accepted.' );
        showMealAccepted();
    } else {
        console.log( 'Meal rejected!' );
        alert( 'Meal rejected!' );
    }
    $('#accept-btn').prop('disabled', true);
    $('#reject-btn').prop('disabled', true);
}

function showMealAccepted() {
    console.log( 'showing meal accepted...' );

    $('#accepted-meal-alert').show();
}

$(document).ready(function () {
    $( document.body ).on( 'click', '.accept-reject-btn', function () {
        console.log( 'Clicked accept-reject button...' );

        let acceptOrReject = $(this).attr('id');
        acceptOrGetAnotherMeal(acceptOrReject);
    });
    $( document.body ).on( 'click', '.alert .close', function (e) {
        $(this).parent().hide();
    });
    $( document.body ).on( 'click', '.reset', function() {
        $('#accept-btn').prop('disabled', false);
        $('#reject-btn').prop('disabled', false);
        $('#accepted-meal-alert').hide();
        console.clear();
    });
});

#accepted-meal-alert {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div
  class="alert alert-success alert-dismissible fade show"
  role="alert"
  id="accepted-meal-alert">
  <button type="button" class="close">&times;</button>
  <p>Genial que te haya gustado la idea!</p>
</div>

<button class="accept-reject-btn" id="accept-btn">Accept</button>
<button class="accept-reject-btn" id="reject-btn">Reject</button>
<button class="reset">Reset</button>