首先让我声明我的编码经验非常少,这就是我首先来到这里的原因。我有一个 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/
我希望我已经提供了足够的信息并清楚地给出了它。