jQuery 临时警报消息答案

【问题标题】：jQuery temporary alert messagesjQuery 临时警报消息
【发布时间】：2014-10-15 17:14:02
【问题描述】：

我正在尝试使用 jQuery 创建某种临时警报消息，以便出现警报消息（带有某种样式和消息的 div），然后在 X 秒后消失。

如果用户再次点击，警报将再次出现...

目前我的脚本甚至没有删除警报。将 temp_alert_X 名称删除为 temp_alert 将使它们在 X 秒后消失，但是如果用户再次单击该按钮，则警报不会再次出现，直到刷新..

function createFarm(){

    $.ajax({
        url: "ajax/new_farm.php",
        context: document.body
    }).done(function(data) {
        data = jQuery.parseJSON(data);

        if(data.error == 1){

            $('.sidebar_frame').append("<p><div id='alert_error' class='temp_alert_" + new_farm_error + "'> " +  data.log + "</div></p>")
            setTimeout(function() {
                $('.temp_alert_' + new_farm_error + '').remove()
            }, 200)

            new_farm_error++;

        }else{}

    }).fail(function() {
            alert( "Error while creating new farm 404." );
    });
}

注意：

new_Farm_error = 0

【问题讨论】：

既然你给你的警报<div> 一个“id”值，为什么不直接用它来引用它呢？
好吧，如果我通过 alert_error 删除，我将无法使用该 ID 创建新的 alert_error div...不知道为什么，但它们不会弹出
200 毫秒是很短的时间来显示警报...您确定它只是在您有时间看到它之前没有被隐藏吗？
呃不，应该没有问题；您的代码无论如何都试图删除该元素。另请注意，将<div> 放在<p> 中是没有意义的，并且浏览器不会那样对待它。只要摆脱周围的<p> ... </p>

标签： javascript jquery html

【解决方案1】：

尝试更改这些行：

$('.sidebar_frame').append("<p><div id='alert_error' class='temp_alert_" + new_farm_error + "'> " +  data.log + "</div></p>")
setTimeout(function() {
    $('.temp_alert_' + new_farm_error + '').remove()
 }, 200)

这些：

 var $errorMsg = $("<p><div id='alert_error' class='temp_alert_" + new_farm_error + "'> " +  data.log + "</div></p>");
 $('.sidebar_frame').append($errorMsg);
 setTimeout(function() {
     $errorMsg.remove();
 }, 200)

注意。 200 毫秒是很短的时间。

如果使用dataType : "json"，则不需要解析JSON

$.ajax({
    dataType : "json"
    //...
});

【讨论】：