从会话存储中使用item作为变量(改变类的可见性)

use item from session storage as variable (to change visibility of class/es) Javascript

本文关键字：改变 变量 可见性 存储 会话 item      更新时间：2023-09-26

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

这个页面的想法在HTML下面解释!提前感谢!!

这是我的html文件:

test.html (与js文件:" . 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通过检查/取消检查复选框，我想隐藏元素的类名，当我按下按钮"隐藏没有"。这就是我被卡住的地方。

我的 js文件(这部分工作很好 ! !):

. 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-file中，记得删除/* &*/): 

//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";}
         }
}
*/

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

创建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完全相同，如果为真则执行代码。继续上一个例子:

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语句中分配变量也是一个坏主意，正如你的问题下的评论所指出的那样。首先，它是没有意义的:赋值总是求值为true。

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

相关文章：