Question

我有这样的警告div：

<div class ="alert-container">
    <div class="alert alert-failure alert-fixed" id="failure-alert">
    <strong><span id="failure-message"></span></strong>
    </div>
    <div class="alert alert-success alert-fixed" id="success-alert">
        <strong><span id="success-message"></span></strong>
    </div>
</div>

我正在这样称呼他们

 <div id="lightsButtons" class="btn-group btn-toggle" data-toggle="buttons-radio">
      <button type="button" class="btn btn-lg btn-default lights-button" id=lights_on value="ON">ON
      </button>
      <button type="button" class="btn btn-lg btn-default lights-button" id=lights_off value="OFF">OFF
      </button>
 </div>

JQuery的：

$("#lights_on").click(function () {
    $.getJSON("/lights_on", function (data) {
        if (data.success == true) {
            $("#lightsState").text(data.lights_state);
            $("#success-alert").show();
            $("#lghts_on").addClass('active');
            $("#lights_off").removeClass('active');
            $("#success-message").text(data.success + data.state)
            $("#success-alert").fadeTo(2000, 500).slideUp(1000, function () {
                $("#success-alert").slideUp(1000);
            });
       } else {
            $("#failure-alert").show();
            $("#failure-message").text(data.success + data.state)
            $("#failure-alert").fadeTo(2000, 500).slideUp(1000, function () {
                $("#failure-alert").slideUp(1000);
            });
        }
    });
});

但所有这些只是谷歌搜索代码的糟糕混乱，我真的只想看到一个干净的方法来执行以下操作：

我想要2个按钮。当按下任一按钮时，它会执行.getJSON（/ example）并获得结果。

例如，让我们使用布尔值和字符串。对于这种情况，结果并不重要。如果为True，则会生成一个已在html文件中定义的警报，但没有任何内容。

警报将包含结果和以下行为：

水平居中
略微偏离（20px）页面顶部
在内容上方浮动并在滚动时跟随页面
淡入淡出，经过一段时间后淡出。
有一个无法多次触发的关闭按钮等待结果

Answer 1

我做了一个快速的Codepen：https://codepen.io/MarkRabey/pen/KqKpWx

我没有严格遵循你的风格建议，但它可能会给你一个想法。我只是使用一个随机数来伪造ajax调用并获得成功或错误以显示不同的警报。

注意这并没有使用任何内置的警报功能。我根本没看过那些。

JS：

// When called sets the buttons disabled depending if the lights are on or off
const toggleButtonState = function() {
    onButton.attr('disabled', lightsOn);
    offButton.attr('disabled', !lightsOn);
}

// show the alert by passing in type (success || error) and  message
const showAlert = function (type, msg) {
  alert.hide();
  alert.removeClass('alert--error alert--success');
  alert.addClass(`alert--${ type }`);
  alert.text(msg);
  alert.fadeIn(300, function() {
    $(this).delay(1200).fadeOut(300);
  });
}

// call ajax, toggle lightsOn on success
const toggleLights = function() {
  let toggleSuccess = false;

  // dummy for 'success'
  const random = Math.floor(Math.random() * 6) + 1;
  if (random % 2) { // success
    lightsOn = !lightsOn;
    toggleSuccess = true;
    showAlert('success', `The lights are ${ lightsOn ? 'on' : 'off'}`);
  }

  toggleButtonState();
  showAlert(toggleSuccess ? 'success' : 'error', `The lights are ${ lightsOn ? 'on' : 'off' }`);
}

const alert = $('#alert');
const onButton = $("#lights_on");
const offButton = $("#lights_off");
let lightsOn = false;
toggleButtonState();

alert.hide();
onButton.click(toggleLights);
offButton.click(toggleLights);

干净的Bootstrap Alert示例

1 个答案: