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

Question

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

您可以使用对象并引用 key :

  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);
  });

请注意，您的消息现在存储在一个包含对象中，因此可以通过 key 访问每条消息。然后 key 将来自 .data('msg') 并通过 messages[$(this).data('msg')] 访问。