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');
});

});

我根据自己的需要对其进行了一些修改。但是，我对 java 的了解比对 html 的了解少，所以这就是我的问题所在。我不需要上一个示例中的文本

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

如果我选中了一个框，则显示出来。所以我从html中删除了它，但我知道java现在很冗长。我不知道要从 javascript 中取出哪些条目，以便它只保存复选框的状态。

我的下一个问题是我想将复选框的所有文本转换为链接。我可以自己做。关于它的问题是，根据检查标记字形的数量，我希望它转到不同的页面。哪个不重要，有多少。因此，如果其中 1 个被选中，它会转到一个页面，其中 2 个会转到另一个页面，依此类推。在我的示例中，根据检查的字形数量，它将进入总共 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/

我希望我已经提供了足够的信息并清楚地给出了它。

4

0 回答 0