Question

首先让我说我的编码经验非常少，这就是我首先来到这里的原因。我有一个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');
});

});

我根据自己的需要对其进行了修改。但是我对java知之甚少，然后我对html做了很多，所以这就是我的问题所在。我不需要上一个例子中的文本

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

显示我是否选中了一个方框。所以我从html中删除了它，但我知道java现在很冗长。我不知道从javascript中取出哪些条目，因此它只保存复选框的状态。

我的下一个问题是我想将复选框的所有文本都转换为链接。我自己可以这样做。它的问题在于，根据检查标记字形的数量，我希望它转到另一个页面。哪个有多少都没关系。因此，如果选中其中一个，则转到一个页面，其中两个转到另一个页面，依此类推，依此类推。在我的例子中，它将总共有6个不同的页面，具体取决于检查了多少个字形。羽毛无所谓。我还没有制作任何链接，因为我不确定如何编码它们，如果我希望它们转到不同的页面，具体取决于检查哪些。

第三个也是最后一个问题是我在不同的页面中有这些，类似于此。

第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/

我希望我已经提供了足够的信息并清楚地说明了这一点。

Jquery，本地存储和更改链接取决于复选框

0 个答案: