1

現時点で私が持っているのは、ユーザーが実績を表示できる実績サイトです (すべて .unselect でスタイル設定された div ボックスに格納されています) 。jQuery を使用してクリックすると、スタイル.selectに変更されます。これにより、ページの右上にカウントも追加されるため、ユーザーは選択した数を確認できます。

私が今やろうとしているのは、選択したボックスを Cookie を介して記憶させることです。これにより、ユーザーがページをリロードするか戻ってきたときに、以前に選択したボックスが数カウントとともにそこに残ります。

私は昼夜を問わずこれを機能させようと試みてきましたが、ここを見回して修正するためのすべての答えは、単にスタイルを変更するのではなく、div クラスを非表示にすることであり、それらを変更しようとする私の試みはほとんど失敗しました.

これまでに書いた HTML のセクションの短縮版を次に示します。

<body>

    <div id="header">
        <h1>Header Title here</h1>
        <p class="navigation">Some navigation links</p>
    </div>

    <div id="counter">
        <h1>Counted:</h1>
        <p class="numCount">0</p>
    </div>

    <div id="container">

        <h2>Plus Achievements</h2>

        <div class="unselect">
            <table width="100%" border="0" cellpadding="6">
                <tr>
                    <td width="64" valign="middle">
                        <img src="http://dl.dropbox.com/u/1733724/tf2icons/tf_complete_training.png"/>
                    </td>
                    <td valign="top" align="left">
                        <h3>Title Here</h3>
                        <p>Description Here</p>
                    </td>
                </tr>
            </table>
        </div>

        <div class="unselect">
            <table width="100%" border="0" cellpadding="6">
                <tr>
                    <td width="64" valign="middle">
                        <img src="http://dl.dropbox.com/u/1733724/tf2icons/tf_complete_training.png"/>
                    </td>
                    <td valign="top" align="left">
                        <h3>Title Here</h3>
                        <p>Description Here</p>
                    </td>
                </tr>
            </table>
        </div>



        <script>

            $(".unselect").click(function() {
                $(this).toggleClass("select");

                var numSelect = $('.select').length
                $('#counter').html('<h1>Counted:</h1><p class="numCount">' + numSelect + '</p>');
            });

        </script>

</body>

</html>

ページのスタイル設定に使用しているドキュメントは、http: //dl.dropbox.com/u/1733724/cgl-pascal.cssからアクセスできます。

ありがとう！

4

1 に答える 1

0

単純化するには、jquery cookie プラグインを使用します。残りは簡単です。

これは、各divに特定のIDを追加する必要があるデモです

<div class="unselect" id="div1"></div>
<div class="unselect" id="div2"></div>
...


var selectedDivs = $.cookie("selected");//get the cookie
if(selectedDivs){
    var IDs = selectedDivs.split(' '); //split by space and get array of IDs
    for(i=0;i<IDs.length;i++){
     var ID = IDs[i];
     if(ID) $('.unselect'+ID).toggleClass("select"); //select only the specific ID            
    }
    $('#counter').html('<h1>Counted:</h1><p class="numCount">' +    $('.select').length + '</p>');
}

次に、ハンドラーに追加する必要があります

 var selectedDivs = "";
 $('div.select').each(function(){
     selectedDivs += " #" + $(this).attr('id');//add the ID with a space
 });
 $.cookie("selected",selectedDivs, { expires: 30 }); //store all selected IDs
于 2012-08-20T19:54:00.310 に答える