Сохранение значений флажка вызывает проблемы с отображением/скрытием связанного изображения

Question

Я написал код для отображения или скрыть изображение на основе значения соответствующих флажков. Мне удалось отобразить картинку или скрыться при перезагрузке, если в поле «check =» отмечено «».

Я смог написать код, чтобы сохранить значение флажка, но затем изображение больше не привязывается к проверенному/непроверенному значению и изменяется с перезагрузкой.

Моя конечная цель - установить флажок установленного флажка, чтобы показать снимок и снять флажок, чтобы скрыть изображение, и мне нужно сохранить значение, чтобы позволить правильное значение работать при перезагрузке после внесения изменений.

Это всего лишь небольшая часть общего кода. Все это серия из 64 флажков, связанных с 64 различными изображениями, которые накладывают отображаемое фоновое изображение.

Следует также упомянуть, что это в конечном итоге будет использоваться для сайта SharePoint, если это имеет значение.

Заранее благодарим за помощь!

(Существует ссылка jsfiddle демо на дне)

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/

1. Переместить ваш «toggleMain ж/Jquery» блок кода после блока кода «сохранения/загрузки», так что флажков будут предварительно проверены перед установкой исходной видимости изображений.

   Таким образом, порядок ваших <script> тегов будет

   а) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   б) скрипт, который использует 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(); 
}