如何在 HTML 數據屬性中將帶有值的 JSON 存儲為句子？

Question

問題：在 data-attribute 中存儲值超過一個單詞的 JSON 響應會導致問題。 它忽略大括號后的文本作為數據屬性中的值。 有時它也會忽略空格字符后的文本。 它將剩余的文本視為一個屬性。 當我獲得 data-action 的值時，它只顯示“{”。

示例代碼它看起來像這樣。

var responseString = [{
                      "key1": "Let's go"
                    },{
                      "key2": "new text"
                    }];
$.each(responseString, function(index, value) {
    childDiv += '<div data-action="' + JSON.stringify(value) + '">CONTENT</div>';
})

$(body).append(childDiv);

Answer 1

因為您的字符串上有' ，所以您必須在連接之前對字符串進行escape 。

如果您正在使用數據，則可以使用unescape 。 單擊元素以獲取data值。

請看下面的例子：

 $(document).ready(function() { var responseString = [{ "key1": "Let's go" }, { "key2": "new text" }]; var childDiv = ""; $.each(responseString, function(index, value) { childDiv += '<div data-action="' + escape(JSON.stringify(value)) + '" >CONTENT</div>'; }); $("body").append(childDiv); $("body").on('click', 'div', function(event) { console.log(unescape($(this).data("action"))); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>