保存复选框值会导致显示/隐藏链接图像时出现问题 [英] Saving checkbox values causes issues with showing/hiding linked image
问题描述
我写了一个代码，根据相应复选框的值显示或隐藏图片。我能够让图片显示或隐藏在重新加载，如果'checked =checked'写入复选框。
I have written a code to show or hide a picture based on the value of corresponding checkboxes. I was able to have the picture shown or hidden on reload if 'checked="checked"' is written into the checkbox.
我能够编写一个代码来保存复选框的值，但是图片不再绑定到选中/未选中的值，而是随着重新加载而更改。
I was able to write a code to save the value of the checkbox but then the picture is no longer tethered to the checked/unchecked value and changes with reload.
我的最终目标是选中复选框以显示图片，取消选中复选框以隐藏图片，我需要保存的值以允许正确的值工作在更改后重新加载。
My end goal is to have the a checked checkbox to show the picture and unchecked checkbox to hide the picture and I need the value saved to allow the correct value to work on reload after a change has been made.
这只是整个代码的一小部分。整个事情是一系列64复选框链接到64不同的图片，它覆盖映射的背景图像。
This is just a small snip of the overall code. The whole thing is a series of 64 checkboxes linked to 64 different pictures, which overlay a mapped background image.
我还应该提到，这将最终用于SharePoint网站，如果这有什么区别。
I should also mention that this will ultimately be used for a SharePoint site, if that makes a difference.
感谢您提供任何帮助！
（底部有一个指向jsfiddle demo的链接）
(There is a link to jsfiddle demo at the bottom)
HTML：
<a href="home.aspx">
<p id="A1R1" style="left:146px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A1R1" alt="A1R1" src="red.jpg" width="108" height="60" />
</p>
</a>
<a href="home2.aspx">
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A2R2" alt="A2R2" src="green.html" width="108" height="60" />
</p>
</a>
<fieldset class="fieldset-auto-width" style="width:165px">
<center>
<p style="font-size:25px">Show/Hide</p>
</center>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A1 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A1G" checked="checked" /> </center>
</fieldset>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A2 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A2G" checked="checked" /> </center>
</fieldset>
</fieldset>
<center>
<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
</center>
JQUERY：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
(function(i, $) {
var $A_1_G = $('#A1G'),
$A_1_R_1 = $('#A1R1');
var toggleMain = function() {
$A_1_R_1.slideToggle();
};
if ($A_1_G.is(':checked')) {
toggleMain();
}
$A_1_G.on('click', toggleMain);
})(document, jQuery);
(function(i, $) {
var $A_2_G = $('#A2G'),
$A_2_R_2 = $('#A2R2');
var toggleMain = function() {
$A_2_R_2.slideToggle();
};
if ($A_2_G.is(':checked')) {
toggleMain();
}
$A_2_G.on('click', toggleMain);
})(document, jQuery);
</script>
Javascript：
Javascript:
function save() {
var checkbox = document.getElementById('A1G');
localStorage.setItem('A1G', checkbox.checked);
var checkbox = document.getElementById('A2G');
localStorage.setItem('A2G', checkbox.checked);
}
function load() {
var checked = JSON.parse(localStorage.getItem('A1G'));
document.getElementById("A1G").checked = checked;
var checked = JSON.parse(localStorage.getItem('A2G'));
document.getElementById("A2G").checked = checked;
}
function wis() {
location.reload();
localStorage.clear()
}
load();
推荐答案
这似乎可以解决： http://jsfiddle.net/w0yL5njs/
-
将toggleMain w / jQuery代码块移到保存/加载代码块之后，以便在设置图片的初始公开范围之前预先检查复选框。
Move your 'toggleMain w/ jQuery' code block to after your 'save/load' code block, so that the checkboxes will be pre-checked before the images' initial visibility are set.
因此，< script> 标签的顺序为
a）< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script>
b）使用jQuery的脚本。
c）不使用jQuery的保存/加载脚本。
a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
b) The script that uses jQuery.
c) your save/load script that doesn't use jQuery.
其实，（b）和（c）可以在同一个< script> 但是（a）必须是分开的。
Actually, (b) and (c) can be in the same <script> but (a) must be separate.
向< p> display：none c $ c>包含图片。
Add display:none to the <p> containing the images.
- 是
class =hidden打算做什么？您可以添加.hidden {display：none; }到您的CSS ...
- Is that what
class="hidden"was intended to do? You could add.hidden { display: none; }to your CSS...
这篇关于保存复选框值会导致显示/隐藏链接图像时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
