要素へのデータ紐づけ

今回は要素へのデータ紐づけに関してです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            $(function(){

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です