保存复选框值会导致显示/隐藏链接图像出现问题

Question

我编写了一个代码来根据相应复选框的值显示或隐藏图片。如果将“checked="checked"' 写入复选框，我可以在重新加载时显示或隐藏图片。

我能够编写代码来保存复选框的值，但随后图片不再与选中/未选中的值绑定，并随着重新加载而改变。

我的最终目标是选中复选框以显示图片，未选中复选框以隐藏图片，我需要保存的值以允许在进行更改后重新加载正确的值。

这只是整个代码的一小部分。整个事情是一系列 64 个复选框链接到 64 个不同的图片，它们覆盖了一个映射的背景图像。

我还应该提到，这最终将用于 SharePoint 网站，如果这有所作为的话。

提前感谢您的帮助！！

（底部有jsfiddle demo的链接）

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>

查询：

<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：

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();

Link to fiddle code

Answer 1

这似乎解决了它：http://jsfiddle.net/w0yL5njs/

1. 将“toggleMain w/jQuery”代码块移动到“保存/加载”代码块之后，以便在设置图像的初始可见性之前预先检查复选框。

   所以你的<script>标签的顺序是

   a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   b) 使用 jQuery 的脚本。 c) 不使用 jQuery 的保存/加载脚本。

   实际上，(b) 和 (c) 可以在同一个<script> 中，但 (a) 必须分开。

2. 将display:none 添加到包含图像的<p>。

   • 这就是class="hidden" 的意图吗？您可以将 .hidden { display: none; } 添加到您的 CSS...

Answer 2

// Remove
if ($A_1_G.is(':checked')) {
toggleMain();
}      
// ADD
if ($A_1_G.is(':checked')) {
  $A_1_R_1.show();
}else{
  $A_1_R_1.hide();
}

//remove
if ($A_2_G.is(':checked')) {
toggleMain();
}

if ($A_2_G.is(':checked')) {
  $A_2_G.show();
}else{
 $A_2_G.hide();
}