Question

我在表格的每一行都有一个编辑帐户按钮，可以使表格可编辑。每行上方都有不同的消息需要显示。我想在每个链接上传递带有数据属性的不同消息。但目前data属性仅用作字符串。不要改变不同的消息。请参阅下面的jQuery ...

      var editAccount = $(".accounts_edit");

      editAccount.click(function(e) {
        e.preventDefault();

        var origHTML = $(this).parents("tr").html();

        var newAccountMsg = "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>"

        var authPaymentsMsg = "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>"

        var acctSystemMsg = "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"

        var whatMessage = $(this).data("msg");
        console.log(whatMessage);

        var editHTML = "<tr class=\"accounts_message\">" +
                  "<td class=\"accounts_primary\"></td>" +
                  "<td colspan=\"5\">" + whatMessage + "</td>" +
                "</tr>" + 
                "<tr class=\"accounts_edit\">" +
                  "<td></td>" +
                  "<td><input type=\"text\" class=\"new_account_no\" required=\"required\" /></td>" +
                  "<td><input type=\"text\" class=\"new_account_name\" required=\"required\" /></td>" +
                  "<td><input type=\"text\" class=\"new_starting_check\" required=\"required\" /></td>" +
                  "<td class=\"accounts_enable_ach\">Yes</td>" +
                  "<td class=\"accounts_manage\">" +
                    "<a class=\"btn btn-custom\" href=\"#\">Save</a><a class=\"btn\" href=\"#\">Cancel</a>" +
                  "</td>" +
                "</tr>";

        $(this).parents("tr").replaceWith(editHTML);
      });

请告诉我var whatMessage如何调用不同的消息，而不是简单地打印数据字符串。谢谢！

Answer 1

这可以使用eval()完成，但使用对象是一个更好的解决方案：

var messages = {
    newAccountMsg: "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>",
    authPaymentsMsg: "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>",
    acctSystemMsg: "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"
};

var whatMessage = messages[$(this).data("msg")];

Answer 2

您可以使用对象并引用密钥：

  var editAccount = $(".accounts_edit");

  editAccount.click(function(e) {
    e.preventDefault();        
    var origHTML = $(this).parents("tr").html();

    var messages = {
      newAccountMsg: "<p>A new account was added by your bank adminstrator. To make payments from the account please link it to your bank account by entering the account number.</p>",
      authPaymentsMsg: "<p>Contact your <a href=\"#\">bank adminstrator</a> who can authorize payments from this account. This is a security feature.</p>",
      acctSystemMsg: "<p class=\"error_msg\">This account was retrieved from your accounting system. To make payments from this account, please link it to your bank account by entering your account number.</p>"
    };

    var whatMessage = $(this).data("msg");
    var editHTML = "<tr class=\"accounts_message\">" +
              "<td class=\"accounts_primary\"></td>" +
              "<td colspan=\"5\">" + messages[whatMessage] + "</td>" +
            "</tr>" + 
            "<tr class=\"accounts_edit\">" +
              "<td></td>" +
              "<td><input type=\"text\" class=\"new_account_no\" required=\"required\" /></td>" +
              "<td><input type=\"text\" class=\"new_account_name\" required=\"required\" /></td>" +
              "<td><input type=\"text\" class=\"new_starting_check\" required=\"required\" /></td>" +
              "<td class=\"accounts_enable_ach\">Yes</td>" +
              "<td class=\"accounts_manage\">" +
                "<a class=\"btn btn-custom\" href=\"#\">Save</a><a class=\"btn\" href=\"#\">Cancel</a>" +
              "</td>" +
            "</tr>";

    $(this).parents("tr").replaceWith(editHTML);
  });

请注意，您的邮件现在存储在包含对象中，因此可以通过密钥访问每个邮件。密钥将来自.data('msg')，并通过messages[$(this).data('msg')]访问。

使用HTML5数据属性作为变量，而不是字符串

2 个答案: