jquery - 如何在页面上存储数据并通过JQuery检索数据？

Question

我有一个数据数组，我将使用 PHP 将其回显到页面，并且我希望 JQuery 能够解析它。但是，我不希望用户必须看到数据。例如，我有:

<div id="data-1">
    <span id="width">5</span>
    <span id="height">10</span>
    <span id="depth">15</span>
</div>
<div id="data-2">
    <span id="width">10</span>
    <span id="height">20</span>
    <span id="depth">30</span>
</div>

我想知道是否应该以这种方式将数据存储在跨度中，然后在 JQuery 中，在加载时隐藏它们并通过稍后获取跨度值来处理数据:

$(document).ready( function() {
    $("#width, #height, #depth").hide();
    $("#data-*").click(function() {
        var width = $("#width", $(this)).text();
        var height = $("#height", $(this)).text();
        var depth = $("#depth", $(this)).text();
    });
});

这是在页面上存储数据的最有效方式吗？我应该使用隐藏输入来代替，还是有其他方法可以做到这一点？

Answer 1

当您使用 PHP 回显数据时，请将其传递给 json_encode() ，这将生成一个可以由 jQuery native 读取的 javascript 对象。然后，您可以在发出请求时将其插入到页面底部，或者使用 AJAX 即时获取它。

PHP:

$my_data = array(
   'data1' => array(
      'width' => 16,
      'height' => 20
    ),
   'data2' => array(
      'width' => 16,
      'height' => 20
    )
);

# echo at bottom of page
echo '<script type="text/javascript">';
echo 'window.my_data = '.json_encode($my_data);
echo '</script>';

jQuery:

var height = window.my_data.data1.height