使用会话存储中的项目作为变量（更改类/es 的可见性）Javascript答案

【问题标题】：use item from session storage as variable (to change visibility of class/es) Javascript使用会话存储中的项目作为变量（更改类/es 的可见性）Javascript
【发布时间】：2016-09-17 18:13:03
【问题描述】：

这里的基本问题是，我的 js 脚本中的最后一个函数不起作用。您可以在这篇文章的底部找到所有 6 个版本。我在我的问题中添加了 HTML 文件和 JS 文件，您可以自己尝试或至少更好地理解我在说什么。

这个页面的想法在HTML下面解释！提前致谢！！

这是我的 HTML 文件：

test.html（链接到 js 文件：“test.js”）

<!DOCTYPE html>
<html>
<head>    <script src="js/test.js"></script>
</head>
<body> 



            <div id="sidebarpanel1" class="sidebarpanel">   
                <form> 
                    <input id="allmedia" class="mediaproperty"type="checkbox" name="media" value="allmedia"  onclick="saveAllmedia ();"><label><p>show me all</p></label><br><br>
                    <input id="photos" class="mediaproperty" type="checkbox" name="media" value="photos" onclick="savePhotoStat ()" checked><label><p>photos</p><label><br>
                    <input id="videos" class="mediaproperty" type="checkbox" name="media" value="videos" onclick="saveVideoStat ()"><label><p>videos</p></label><br>
                    <input id="texts" class="mediaproperty" type="checkbox" name="media" value="text" onclick="saveTextStat ()"><label><p>texts</p></label><br>
                </form> 
            </div>

            <button onclick="enterPhotoStat (); enterVideoStat (); enterTextStat ();">show results</button>
            <div><p id="photosresult" class="photo"></p></div>
            <div><p id="videosresult" class="video"></p></div>
            <div><p id="textsresult" class="text"></p></div>
            <button onclick="displayPhotos();">hide "no's"</button>



</body>
</html>

理念：

我的想法是在 sessionStorage 中保存复选框的选中/未选中状态。到目前为止效果很好，“显示结果”按钮显示保存在 sessionStorage 中的内容。

基于通过选中/取消选中复选框保存到 sessionStorage 的内容，当我按下“隐藏 no”按钮时，我想按其类名隐藏元素。这就是我卡住的地方。

我的 JS 文件的第一部分（这部分工作得很好！！）：

test.js

function start() {  /*generates session storage at pageload*/
savePhotoStat();    /*I shouldn't put 'saveAllmedia()' in here*/
saveVideoStat();
saveTextStat();
}
window.onload = start;


function savePhotoStat(){   /*generates sessionStorage for photo-checkbox*/
    if (document.getElementById("photos").checked) {var photoproperties = 'yes'}
    else {var photoproperties = 'no'};    
    sessionStorage.setItem("photos", photoproperties);
}
function enterPhotoStat() {   /*to display photo-storage with result-button */
document.getElementById("photosresult").innerHTML = " photos checked: " + sessionStorage.getItem("photos");
}



function saveVideoStat(){    /*generates sessionStorage for video-checkbox*/
    if (document.getElementById("videos").checked) {var photoproperties = 'yes'}
    else {var photoproperties = 'no'};    
    sessionStorage.setItem("videos", photoproperties);
}
function enterVideoStat() {    /*to display photo-storage with result-button */
document.getElementById("videosresult").innerHTML = " videos checked: " + sessionStorage.getItem("videos");
}



function saveTextStat(){    /*generates sessionStorage for text-checkbox*/
    if (document.getElementById("texts").checked) {var photoproperties = 'yes'}
    else {var photoproperties = 'no'};    
    sessionStorage.setItem("texts", photoproperties);
}
function enterTextStat() {    /*to display text-storage with result-button */
document.getElementById("textsresult").innerHTML = " texts checked: " + sessionStorage.getItem("texts");
}

现在，第二部分来了，这就是问题所在。

实际上，它只是多了一个功能，我创建了多个版本。

我希望这个函数从一个媒体复选框（照片、视频或文本）中读取会话存储，并根据它来决定隐藏或显示课程的天气！但是没有版本有效...

损坏的函数版本（只需添加到test.js-文件，记得删除/* & */）：

//VERSION 1
/*
function displayPhotos(){
    var photoproperties = sessionStorage.getItem("photos");                                             
    if (photoproperties == 'yes') {getElementsByClassName('photo').show}                                
    else {getElementsByClassName('photo').hide}
}
*/


//VERSION 2
/*
function displayPhotos(){
    if (sessionStorage.getItem("photos") == 'yes') {getElementsByClassName('photo').show}                   
    else {getElementsByClassName('photo').hide}
}
*/


//VERSION 3
/*
function displayPhotos(){
    var photoproperties = sessionStorage.getItem("photos"); 

    if (photoproperties == 'yes') {var displayphotos = document.getElementsByClassName('photo');
                                     for (var i = 0; i != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "visible";}
                                    }
    else {var displayphotos = document.getElementsByClassName('photo');
          for (var i = 0 != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "hidden";}
         }
}
*/


//VERSION 4
/*
function displayPhotos(){       
    if (sessionStorage.getItem("photos") == 'yes') {var displayphotos = document.getElementsByClassName('photo');
                                                   for (var i = 0; i != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "visible";}
                                                  }
    else {var displayphotos = document.getElementsByClassName('photo');
          for (var i = 0 != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "hidden";}
         }
}
*/


//VERSION 5
/*
function displayPhotos(){
    var showphotoproperties = 'yes';

    if (showphotoproperties == sessionStorage.getItem("photos")) {var displayphotos = document.getElementsByClassName('photo');
                                     for (var i = 0; i != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "visible";}
                                    }
    else {var displayphotos = document.getElementsByClassName('photo');
          for (var i = 0 != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "hidden";}
         }
}
*/


//VERSION 6
/*
function displayPhotos(){
    var showphotoproperties1 = 'yes';                                 //<-- das geht so definitiv onclick!!!!! :)
    var showphotoproperties2 = sessionStorage.getItem("photos")     //<-- das geht so definitiv onclick!!!!! :)

    if (showphotoproperties1 == showphotoproperties2) {var displayphotos = document.getElementsByClassName('photo');
                                     for (var i = 0; i != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "visible";}
                                    }
    else {var displayphotos = document.getElementsByClassName('photo');
          for (var i = 0 != displayphotos.lenght; ++i) {displayphotos[i].style.visibility = "hidden";}
         }
}
*/

感谢所有参与其中的人，这对我来说意义重大！

【问题讨论】：

哦，谢谢 Ryan，它是用 Javascript 编写的，正如我所提到的，我对主页编程非常陌生（这是我的第一个主页）。那么你是说不能在我的 if 括号中使用我的变量作为条件： if (var='whatever') {} does not work？
不，我对编程完全陌生，以前从未做过类似的事情。甚至没有接近那个。这就是为什么我经常被如此明显的事情所困扰。我从未听说过这种 OOP 的东西，但我已经发现那些“this”功能会让人头疼！感谢您的每一条建议，对我来说意义重大！

标签： javascript class session variables storage

【解决方案1】：

当你创建你的 if 语句时，你应该使用比较，而不是赋值。

if (a=b)

是一个赋值，意味着 a 的值将变为 b。例如：

var a = 1;
var b = 2;
if (a = b) console.log(a); //This will always print 2 to the log.

If (a==b)

表示它将检查 a 是否与 b 相似，如果是，它将执行代码。继续上一个例子：

var c = "1";
if (a == b) console.log(a); //Never prints since 1 != 2
if (a == c) console.log(a); //Always prints 1 since the string "1" is like the number 1.

If (a===b)

表示它将检查 a 是否与 b 完全相同，如果为 true 将执行代码。继续上一个例子：

if (a === b) console.log(a); //Never prints since 1 != 2
if (a === c) console.log(a); //Never prints since the number 1 is not the same as the string "1".

在 if 语句中分配变量也是一个坏主意，正如您问题下的 cmets 中所述。一方面它是没有意义的：赋值总是会被评估为真。

据我所知，您的问题是您在 if 语句中为存储分配值而不是检查它们。

【讨论】：

很好，这太棒了，我马上就明白了。我会尝试在一分钟内修复我的功能，我希望可以！到目前为止，谢谢！
好吧，我接受了您的建议并更改了我的功能（请参阅编辑），但它们仍然无法正常工作.. 那些“console.log()”是怎么回事？我也应该将它们添加到我的函数中吗？
console.log 是 Web 浏览器环境中可用的功能。它们仅用于演示，但如果您需要调试脚本，它们会很有帮助，因为它们可以让您直接将信息从脚本打印到浏览器中。
至于你的脚本：我需要更多关于实际问题的信息。然而，经过更深入的检查，我发现很多错别字/东西丢失了。为此，Web 控制台将派上用场。哪些错误会打印到 Web 控制台？ (ctrl + shift + j in firefox/chrome)
这个console.log() 很棒，很好的功能，很高兴你告诉我。无论如何，我尝试用它自己修复该功能，还检查了网络控制台，但它并没有真正导致成功。我不想占用你太多时间，所以我编辑了页面一次，它显示了相关的HTML和完整的JS文件，复制和粘贴就绪。这只是一个小测试页，应该很容易概述。如果您（或其他人）抽出几分钟时间，那就太棒了，如果没有，还是谢谢您！！！