Question

假设我们附加了错误通知html / css pane / div，以显示从ajax调用返回到服务器代码的一些应用程序层错误。我们分析服务器中json响应有效负载中是否存在错误，并执行以下操作：

$('#message').remove();
$('body').append('<div id="message" style="display: none;"><a href="" id="message-close">Close</a></div>');
$('#message-close').before(data['message'] + '<ul id="errors"><li>' + data['errors'].join('</li><li>') + '</li></ul>');
$('#message').addClass('error').fadeIn();

这很好用，但如果人们可以指出我可能错过的jquery方面的改进（基本或更优雅）或缺陷，我将不胜感激。例如，用jquery散布html片段可能会被认为是令人遗憾的。顺便说一下，在其他地方（以及成功分支）定义了＃message-close的点击处理程序，因为这是一个编辑的示例。如果此问题属于代码审查网站而不是stackoverflow，请告诉我。我没有用过前者，但我知道它存在。

Answer 1

这个解决方案肯定不是更简洁，但我认为程序化方法可以更好地扩展，更适合处理异常和极端情况（当它们不可避免地出现时）。

使用append然后使用before等等，它似乎比您的示例更直接。这是自下而上构建的，并根据需要嵌套数据和事件处理程序。

$(function() {

    // simulate ajax call
    setTimeout(function() {

        // ajax datas
        var data = {errors: ['one', 'two', 'three']};

        // close handler
        var closeMessage = function() {
            $(this).parents("div").fadeOut();
            return false;
        };

        // render dialog
        $('<div id="message" style="display: none;"></div>').append(
            $('<ul id="errors"/>').append(
                $.map(data.errors, function(t) {
                    return $("<li/>").text("an error: "+t)[0];
                })))
            .append(
                $('<a href="#close" id="message-close">Close</a>')
                    .click(closeMessage))
            .appendTo("body")
            .fadeIn();

    }, 1000);

});

See it working here on jsFiddle

使用jquery追加内容

1 个答案: