为什么此JavaScript if语句不起作用？

Question

I'm trying to change the value of <input type = "hidden" name = "hidden" id = "hidden" value = "0"> whenever you select one of the drop down options from the <select> tag. 每当您从<select>标记中<select>下拉选项之一时，我都试图更改<input type = "hidden" name = "hidden" id = "hidden" value = "0"> 。 All the code work until I get to the if statements. 所有代码都可以工作，直到获得if语句为止。 Please help me and thank you. 请帮助我，谢谢。 This is my code below. 这是我的下面的代码。 I don't know if you need the CSS. 我不知道您是否需要CSS。

 $(document).ready(function(){ /* Hide these items on load. */ $("nav").hide(); $("#hrNavLines2").hide(); $("#usersBar").hide(); $("#videosBar").hide(); $("#albumsBar").hide(); var video = document.getElementById("mainVideo"); $("#hrNavLines1").click(function(){ $("#hrNavLines1").hide(); $("#hrNavLines2").show(); $("nav").show(); }); $("#hrNavLines2").click(function(){ $("#hrNavLines2").hide(); $("#hrNavLines1").show(); $("nav").hide(); }); var opts = document.getElementById("opts"); opts.onchange = function() { var selected = opts.options[opts.selectedIndex].value; switch(selected) { case "All": $("#allBar").show(); $("#usersBar").hide(); $("#videosBar").hide(); $("#albumsBar").hide(); break; case "Users": $("#allBar").hide(); $("#usersBar").show(); $("#videosBar").hide(); $("#albumsBar").hide(); break; case "Videos": $("#allBar").hide(); $("#usersBar").hide(); $("#videosBar").show(); $("#albumsBar").hide(); break; case "Albums": $("#allBar").hide(); $("#usersBar").hide(); $("#videosBar").hide(); $("#albumsBar").show(); } if (!$("#usersBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) { $("#hidden").value(0); } else if (!$("#allBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) { $("#hidden").value(1); } else if (!$("#allBar").is(":visible") && !$("#usersBar").is(":visible") && !$("#albumsBar").is(":visible")) { $("#hidden").value(2); } else { $("#hidden").value(3); } var hidden = document.getElementById("hidden"); alert(hidden); } });

 header > #headerTop > #title { font-size: 33px; font-family: Arial; border: 2px solid black; border-radius: 30px; position: absolute; top: 10%; left: 6.5%; padding-left: 7px; padding-right: 7px; padding-top: 3px; padding-bottom: 3px; } header { background-color: white; position: absolute; top: 0%; left: 0%; padding: 7px; width: 98.9%; height: 7%; border-bottom: 1.5px solid black; } header a { padding-left: 10px; padding-right: 10px; } nav { position: absolute; top: 93%; left: 0%; background-color: white; border-radius: 5px; border-bottom: 1.5px solid black; border-right: 1.5px solid black; } a { color: blue; text-decoration: none; } #hrNavLines1, #hrNavLines2 { position: absolute; top: 5%; left: .5%; cursor: pointer; width: 25px; } #search { position: absolute; top: 20%; right: 1.75%; } .searchBar { text-align: center; width: 680px; height: 30px; padding: 3px 10px; margin: 0px 3px; font-size: 17px; } select { height: 30px; font-size: 17px; margin: 0px 3px; } #searchBttn { height: 38px; width: 80px; font-size: 17px; border-radius: 5px; margin-left: 3px; } body { background-color: #EEEEEE; }

 <?PHP require("searchResults.php"); ?> <!DOCTYPE HTML> <HTML lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "description" content = "Videopia is a video websites upload your videos to be cool."> <meta name = "author" content = "Adam Oates"> <meta name = "title" content = "Home"> <title title = "Home | Videopia"> Home | Videopia </title> <link rel = "stylesheet" type = "text/css" href = "main.css"> <script type = "text/javascript" src = "http://code.jquery.com/jquery-2.1.4.js"></script> <script type = "text/javascript" src = "main.js"></script> </head> <body> <header> <div id = "hrNavLines1"> <hr class = "hrNav" noshade> <hr class = "hrNav" noshade> <hr class = "hrNav" noshade> </div> <div id = "hrNavLines2"> <hr class = "hrNav" noshade> <hr class = "hrNav" noshade> <hr class = "hrNav" noshade> </div> <nav> <a href = "http://videopia.gigaboywebdesigns.com/" id = "currentLink">Home</a><br><br> <a href = "http://videopia.gigaboywebdesigns.com/account/">Create New User</a><br><br> </nav> <div id = "headerTop"> <span id = "title"> Videopia </span> <span id = "search"> <select id = "opts"> <option id = "allOpt" value = "All">All</option> <option id = "usersOpt" value = "Users">Users</option> <option id = "videosOpt" value = "Videos">Videos</option> <option id = "albumsOpt" value = "Albums">Albums</option> </select> <input type = "hidden" value = "0" id = "hidden" name = "hidden"> <input type = "text" placeholder = "Search Users, Videos, and Albums" class = "searchBar" name = "searchBar" id = "allBar"> <input type = "text" placeholder = "Search Users" class = "searchBar" name = "usersBar" id = "usersBar"> <input type = "text" placeholder = "Search Videos" class = "searchBar" name = "videosBar" id = "videosBar"> <input type = "text" placeholder = "Search Albums" class = "searchBar" name = "albumsBar" id = "albumsBar"> <input type = "button" value = "Search" id = "searchBttn" name = "searchBttn"> </span> </div> </header> <section id = "mainIndex"> </section> <footer> Copyright &copy; 2015 Videopia. All rights reserved.<br> Developed by <a href = "http://www.gigaboywebdesigns.com/">Gigaboy Web Designs</a> </footer> </body> </HTML>

Answer 1

Change this section of your code and add a break to the last case. 更改代码的这一部分，并在最后一种情况下添加一个分隔符。 : ：

var selected = opts.options[opts.selectedIndex].val(); var selected = opts.options [opts.selectedIndex] .val（）;

Instead of : 代替：

var selected = opts.options[opts.selectedIndex].value; var selected = opts.options [opts.selectedIndex] .value;

Snippet : 片段：

var selected = opts.options[opts.selectedIndex].val();
switch(selected) {
                case "All":
                    $("#allBar").show();
                    $("#usersBar").hide();
                    $("#videosBar").hide();
                    $("#albumsBar").hide();
                    break;
                case "Users":
                    $("#allBar").hide();
                    $("#usersBar").show();
                    $("#videosBar").hide();
                    $("#albumsBar").hide();
                    break;
                case "Videos":
                    $("#allBar").hide();
                    $("#usersBar").hide();
                    $("#videosBar").show();
                    $("#albumsBar").hide();
                    break;
                case "Albums":
                    $("#allBar").hide();
                    $("#usersBar").hide();
                    $("#videosBar").hide();
                    $("#albumsBar").show();
                    break;

为什么此JavaScript if语句不起作用？

问题描述

1 个解决方案

解决方案1
2 2016-02-02 05:10:00

为什么此JavaScript if语句不起作用？

问题描述

1 个解决方案

解决方案1 2 2016-02-02 05:10:00

解决方案1
2 2016-02-02 05:10:00