Используйте атрибут данных 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

Вы можете использовать объект и ссылаться на ключ:

  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')],

Answer 2

Это может быть сделано с 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")];