这里的基本问题是,我的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语句中分配值给存储,而不是检查它们。