Question

这是我关于Stack Overflow的第一个问题，我是Javascript的新手（已经教自己Python了解编码的感觉）并且认为我会尝试使用简单的Web应用程序看看它是多么容易把我的Python知识翻译成Javascript。

基本上，该应用程序会让你知道你最喜欢的水果等在哪个季节。所以我在一个页面'fruitpicker.html'上有一个复选框列表，在另一个'seasonalguide.html'上有相应的图像（图像只是带有水果季节阴影的日历图片等）。

我有一个持久化复选框状态的cookie和一个外部JS，它根据相应复选框的状态切换图像可见性。大多数其他人在网上使用的cookie，所以效果很好，但JS的形象给我带来了麻烦。

我已经写了我认为它应该是什么，但它不起作用，无论我多么修补它，没有任何反应。

我确定这真是愚蠢但无论如何，这是代码......

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>

问题变得越来越长，所以我没有包含cookie，但如果它有用，我可以。感谢任何帮助，谢谢

Answer 1

我在这里注意到两个问题。

首先，您使用的是两个单独的页面，但document.getElementById只能访问您所在页面的元素。那么，你的界限：

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

必须失败，因为他们试图访问两个页面中的元素。无论您在哪个页面上运行脚本，其中一行都将返回null。你的问题没有描述两个单独的HTML文件是如何相互关联的，所以我无法帮助你解决这个问题（第一个加载第二个是否只要点击一个复选框，或是两个页面加载在框架或iframe中父页面？）。

第二个问题是你的toggleVisibility函数是用两个参数定义的，但你的代码是（例如）：

onChange=  "toggleVisibility('grannySmithItem'); 
               toggleVisibility('grannySmithSeason');

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

Javascript使用cookie /复选框保持图像可见性

1 个答案: