Question

我正在为我的应用程序编写即时消息模块，在客户端使用jQuery。一切正常，只有一个问题如何编写正确的一部分代码。以下是代码的一部分，它在UI上显示消息：

function messageBuildTableRow(message) {
    var pm =
    "<li>" +
        "<div class='alert alert-warning'>" +
            "<p>" + message.Body + "<span> - </span>" + moment(message.SentAt).calendar() + "</p>" +
        "</div>" +
    "</li>";
    return pm;
}

但我想让发件人留言不同的风格，所以我的解决方案是这样的：

function messageBuildTableRow(message) {
    var pm =
        "<li>" +
            if(message.SenderUserName == @User.Identity.Name) {
                "<div class='alert alert-info'>" +
            } else {
                "<div class='alert alert-warning'>" +
            }
                    "<p>" +message.Body + "<span> - </span>" + moment(message.SentAt).calendar() + "</p>" +
                "</div>" +
         "</li>";
    return pm;
}

我遇到语法错误，有人可以帮助正确编写这部分代码。

Answer 1

@User.Identity.Name输出一个字符串值。您需要将该输出包装在引号中，这样当它写入页面时，JS也会将其识别为字符串。试试这个：

if (message.SenderUserName == '@User.Identity.Name')
{
    // your code...
}

另请注意，您无法直接附加if条件。你需要将你的陈述分开：

function messageBuildTableRow(message) {
    var pm = "<li>";

    if (message.SenderUserName == '@User.Identity.Name') {
        pm += "<div class='alert alert-info'>";
    } else {
        pm += "<div class='alert alert-warning'>"
    }

    pm += "<p>" + message.Body + "<span> - </span>" + moment(message.SentAt).calendar() + "</p></div></li>";

    return pm;
}

这可以使用三元进一步缩短：

function messageBuildTableRow(message) {
    return '<li><div class="alert ' + (message.SenderUserName == '@User.Identity.Name' ? 'alert-info' : 'alert-warning') +  '"><p>' + message.Body + '<span> - </span>' + moment(message.SentAt).calendar() + '</p></div></li>';
}

Answer 2

假设编写的这段代码位于.cshtml页面而不是单独的js页面中，您可以按以下方式尝试：

function messageBuildTableRow(message) {
    var diffElement=message.SenderUserName == @User.Identity.Name?
                    "<div class='alert alert-info'>":
                    "<div class='alert alert-warning'>";
    //Instead of if, have a ternary operator and store the necessary alert type in a variable

    //add it directly then as below
    var pm ="<li>" + diffElement +

    "<p>" +message.Body + "<span> - </span>" + moment(message.SentAt).calendar() +
    "</p>" +
    "</div>" +
    "</li>";
    return pm;
}

需要帮助正确编写jQuery代码

2 个答案: