使用cookie/复选框持久化图像可见性

Javascript Persisting image visibility with a cookie/checkbox

本文关键字：图像 可见性 持久化 复选框 cookie 使用      更新时间：2023-09-26

这是我在Stack Overflow上的第一个问题，我是Javascript新手(一直在自学Python以获得编码的感觉)，并认为我应该尝试一下简单的web应用程序，看看将我的Python知识转化为Javascript是多么容易。

基本上，这个应用程序会让你知道你最喜欢的水果等什么时候上市。所以我有一个复选框列表在一个页面'fruitpicker.html'和对应的图像在另一个'seasonalguide.html'(图像只是图片的日历与水果季节阴影等)。

我有一个cookie，它保存复选框状态和一个外部JS，它根据相应的复选框状态切换图像可见性。大多数cookie是别人在网络上使用的，所以它工作得很好，但是图像vis JS给我带来了麻烦。

我已经写了我认为应该是什么，但它没有工作，无论我怎么修修补补，什么都没有。

我相信这是很愚蠢的东西，但无论如何，这是代码…

破碎的图像vs JS: 

function toggleVisibility(checkId, imageId) {
    var imgEl = document.getElementById(imageId);
    var checkEl = document.getElementById(checkId);
    if (checkEl.checked) {
        imgEl.style.visibility="hidden";
        imgEl.style.display="none";
    }
    else {
        imgEl.style.visibility="visible";
        imgEl.style.display="inline-block";
    }
  }

顺便说一下，如果行:var checkEl = document.getElementById(checkId);被删除，代码工作，但图像状态不持久。这是我所能做到的。

fruitpicker.html中的几个复选框:

<html>
<head>
<title>Fruit Picker</title>
<script type="text/javascript" src="cookie.js"></script>
</head>
<body onload="restorePersistedCheckBoxes();">
<label for=       "chklogo">Braeburn</label>
<input type=      "checkbox" 
       id=        "chkBraeburn"
             onChange=  "toggleVisibility('braeburnItem'); 
                   toggleVisibility('braeburnSeason');
                   persistCheckBox(this);" /><br>                   
<label for=       "chklogo">Fuji</label>
<input type=      "checkbox" 
       id=        "chkFuji" 
       onChange=  "toggleVisibility('fujiItem'); 
                   toggleVisibility('fujiSeason');
                   persistCheckBox(this);" /><br>
<label for=       "chklogo">Golden Delicious</label>
<input type=      "checkbox" 
       id=        "chkgolldenDelicious" 
       onChange=  "toggleVisibility('goldenDeliciousItem'); 
                   toggleVisibility('goldenDeliciousSeason');
                   persistCheckBox(this);" /><br>
<label for=       "chklogo">Granny Smith</label>
<input type=      "checkbox" 
       id=        "chkGrannySmith" 
       onChange=  "toggleVisibility('grannySmithItem'); 
                   toggleVisibility('grannySmithSeason');
                   persistCheckBox(this);"/><br/>
</body>
</html>

这是季节指南页面:

<html>
<head>
    <script type="text/javascript" src="cookie.js"></script>
    <script type="text/javascript" src="imageVisibility.js"></script>
</head>
<body>
<img    id="imgGuide" 
        src="Images/Calendar/calendarHeader.png"
        align="left"/>
<img    id="braeburnItem" 
        src="Images/Produce/Fruit/BraeburnApple.png" 
        style="float:left; display:none;" />
<img    id="braeburnSeason" 
        float="top" 
        src="Images/InSeason/InSeasonApr.png"  
        align="left" 
        style="display:none"/>
<img    id="fujiItem" 
        src="Images/Produce/Fruit/FujiApple.png" 
        style="float:left; display:none;" />
<img    id="fujiSeason" 
        float="top" 
        src="Images/InSeason/InSeasonMar.png"  
        align="left" 
        style="display:none;"/>
<img    id="goldenDeliciousItem" 
        src="Images/Produce/Fruit/GoldenDeliciousApple.png"  
        style="float:left; display:none;"/>
<img    id="goldenDeliciousSeason" 
        src="Images/InSeason/InSeasonFeb.png"  
        align="left"
        style="display:none;"/>
<img    id="grannySmithItem" 
        src="Images/Produce/Fruit/GrannySmithApple.png"  
        style="float:left; display:none;"/>
<img    id="grannySmithSeason" 
        src="Images/InSeason/InSeasonApr.png" 
        align="left"
        style="display:none;"/><br>
<table width="170px" height="70px">
<tr>
    <td>
    <a href="Main.html" id="back" title="about" class="button">
    <img src="Images/Buttons/backButton.png" align="right">
    </td>
  </tr>
</table>
</body>
</html>

这个问题很长，所以我没有包括饼干，但如果它有用的话，我可以。任何帮助都是感激的，谢谢

我注意到两个问题。

首先，您正在使用两个独立的页面，但是document.getElementById只能访问您所在页面的元素。所以，你的行:

var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);

必须失败，因为它们试图访问两个页面中的元素。无论您在哪个页面上运行脚本，其中一行都将返回null。你的问题没有描述两个独立的HTML文件如何相互关联，所以我不能帮助你解决这个问题(第一个加载第二个每当一个复选框被点击，或者两个页面加载在父页面的框架或iframe ?)。

第二个问题是你的toggleVisibility函数是用两个参数定义的，但是你的代码(例如): 
onChange=  "toggleVisibility('grannySmithItem'); 
               toggleVisibility('grannySmithSeason');

只调用一个参数的方法(两次)。如果我们谈论的是同一个函数(您可能在两个页面上的每个页面上都有不同的函数定义)，那么该函数永远无法识别正确的图像，因为从未提供imageId。

相关文章：