Question

我编写了一个代码，用于根据相应复选框的值显示或隐藏图片。如果＆＃39;检查=＆＃34;检查＆＃34;＆＃39;我能够在重新加载时显示或隐藏图片。写入复选框。

我能够编写一个代码来保存复选框的值，但随后图片不再受限于已检查/未检查的值，并随着重新加载而更改。

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

这只是整个代码的一小部分。整个过程是一系列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>

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：

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/

移动您的＆＃39; toggleMain w / jQuery＆＃39;在您的“保存/加载”之后的代码块代码块，以便在图像之前预先检查复选框。初始可见性已设定。

因此，<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）必须是分开的。
将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();
}

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

2 个答案: