使用jQuery的.data()來設定與取得資料

Posted on Edited on In Views: Disqus:

 

使用jQuery的.data()來設定與取得資料

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            //此動作相當於在div裡的data-greeting屬性放入"Hello world"字串
            //而不是真的寫data-greeting在div的attritube裡
            $("#btn1").click(function () {
                $("div").data("greeting", "Hello World");
            });

            //此動作相當於取出div裡的data-greeting屬性裡的資料
            $("#btn2").click(function () {
                alert($("div").data("greeting"));
            });

        });
    </script>
</head>
<body>

    <button id="btn1">Attach data to div element</button><br>
    <button id="btn2">Get data attached to div element</button>
    <div></div>

</body>
</html>

JS Bin

當我們按下btn1時(設定)，此時到console端，

去取出$("div").data("greeting")的資料時，會輸出"Hello World"字串

"greeting"為Key，"Hello world"為value

 

參考資料：

jQuery Misc data() Method

jQuery.data( element, key, value )