0

まず最初に、私のコーディング経験はほとんどないことを述べさせてください。それが、そもそも私がここに来る理由です。javascript/html 5 の問題や質問があります。チェックボックスをローカルストレージに保存したいと思います。http://jsfiddle.net/TzPW9/330/を使用して把握したこと。

HTML:
<div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>  
<p><input type="checkbox" value="Reference " id="reference" checked /> 
<label for="reference">Reference</label></p>
</div>

<div id="nametxt"> Show Name TEXT </div>
<div id="referencetxt"> Show Ref TEXT </div>

JAVA:
function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
    // use localStorage:
    return {
        set: function(id, data) {
            localStorage.setItem(key_prefix+id, data);
        },
        get: function(id) {
            return localStorage.getItem(key_prefix+id);
        }
    };
} else {
    // use document.cookie:
    return {
        set: function(id, data) {
            document.cookie = key_prefix+id+'='+encodeURIComponent(data);
        },
        get: function(id, data) {
            var cookies = document.cookie, parsed = {};
            cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                parsed[key] = unescape(value);
            });
            return parsed[key_prefix+id];
        }
    };
}
}

jQuery(function($) {
// a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_'); 

$('div.check input:checkbox').bind('change',function(){
    $('#'+this.id+'txt').toggle($(this).is(':checked'));
    // save the data on change
    storedData.set(this.id, $(this).is(':checked')?'checked':'not');
}).each(function() {
    // on load, set the value to what we read from storage:
    var val = storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
});

});

私はそれを私のニーズに合わせて修正しました。ただし、html よりも Java についての知識が少ないため、ここで問題が発生します。前の例のテキストは必要ありません。

<div id="nametxt"> Show Name TEXT </div>
<div id="referencetxt"> Show Ref TEXT </div>

チェックボックスをオンにすると表示されます。だから私はそれをhtmlから削除しましたが、Javaが冗長になっていることはわかっています。チェックボックスの状態のみを保存するように、javascriptからどのエントリを取り出すべきかわかりません。

私の次の問題は、チェックボックスのすべてのテキストをリンクにしたいということです。私はそれを自分で行うことができます。それに関する問題は、マークされたグリフがいくつチェックされるかに応じて、別のページに移動したいということです。いくつでも構いません。したがって、そのうちの 1 つがチェックされている場合は 1 つのページに移動し、2 つがチェックされている場合は別のページに移動します。私の例では、チェックされたグリフの数に応じて、合計 6 つの異なるページに移動します。羽は関係ありません。チェックされているページに応じて別のページに移動したい場合、それらをコーディングする方法がわからないため、まだそれらのリンクを作成していません。

3 つ目の最後の問題は、これと同様に、これらが別のページにあることです。

ページ1：

 <p><input type="checkbox" value="Feather 1" id="Feather 1"/> 
<label for="Feather 1">Feather 1</label></p>  
<p><input type="checkbox" value="Feather 2" id="Feather 2"/> 
<label for="Feather 2">Feather 2</label></p>
    <p><input type="checkbox" value="Feather 3" id="Feather 3"/> 
<label for="Feather 3">Feather 3</label></p> 
<p><input type="checkbox" value="Glyph 1 - Santa Maria Novella" id="Glyph 1 - 
Santa Maria Novella"/> <label for="Glyph 1 - Santa Maria Novella">
Glyph 1 - Santa Maria Novella</label></p>  
<p><input type="checkbox" value="Glyph 2 - The Water Tower" id="Glyph 2 - The Water Tower"/> 
<label for="Glyph 2 - The Water Tower">Glyph 2 - The Water Tower</label></p>
    <p><input type="checkbox" value="Glyph 3 - Windmill" id="Glyph 3 - Windmill"/> 
<label for="Glyph 3 - Windmill">Glyph 3 - Windmill</label></p>

ページ2：

 <p><input type="checkbox" value="Feather 1" id="Feather 1"/> 
<label for="Feather 1">Feather 1</label></p>  
<p><input type="checkbox" value="Feather 2" id="Feather 2"/> 
<label for="Feather 2">Feather 2</label></p>
    <p><input type="checkbox" value="Feather 3" id="Feather 3"/> 
<label for="Feather 3">Feather 3</label></p> 
<p><input type="checkbox" value="Glyph 1 - The Forest" id="Glyph 1 - The Forest"/> 
<label for="Glyph 1 - The Forest">Glyph 1 - The Forest</label></p>
    <p><input type="checkbox" value="Glyph 2 - Villa" id="Glyph 2 - Villa"/> 
<label for="Glyph 2 - Villa">Glyph 2 - Villa</label></p>

ページ 3:

 <p><input type="checkbox" value="Feather 1" id="Feather 1"/> 
<label for="Feather 1">Feather 1</label></p>  
<p><input type="checkbox" value="Feather 2" id="Feather 2"/> 
<label for="Feather 2">Feather 2</label></p>
    <p><input type="checkbox" value="Feather 3" id="Feather 3"/> 
<label for="Feather 3">Feather 3</label></p> 
<p><input type="checkbox" value="Glyph 1 - Alamo" id="Glyph 1 - Alamo"/> <label for="Glyph 1 - Alamo">Glyph 1 - Alamo</label></p>

私が今持っている方法では、これらのチェックボックスのいずれかを含むページはすべて、チェックボックスが一貫しています。それが私が欲しいものです。ただし、グリフをカウントするためのコードは、複数のページにまたがっているため、Cookie またはローカル ストレージ データをカウントする必要があります。

要約すると、チェックボックスが別のページにある場合でも、チェックされているグリフチェックボックスの数に応じて、最終的な JavaScript を冗長にする必要があり、別のページに移動する必要があります。いくつでも構いません。それらの名前/IDをGlyph 1、Glyph 2、Glyph 3、Glyph 4、Glyph 5、Glyph 6、またはその他必要なものに変更しても問題ありませんが、そうではありません。

ここに私が今編集しなければならないコードがあります。http://jsfiddle.net/TzPW9/335/

十分な情報を提供し、明確に提供したことを願っています。

4

0 に答える 0