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")];

.