Почему этот оператор JavaScript if не работает?

Я пытаюсь изменить значение <input type = "hidden" name = "hidden" id = "hidden" value = "0"> всякий раз, когда вы выбираете один из вариантов выпадающего списка из тега <select>. Весь код работает до тех пор, пока я не получу инструкции if. Пожалуйста, помогите мне и спасибо. Это мой код ниже. Я не знаю, нужен ли вам CSS.Почему этот оператор JavaScript if не работает?

$(document).ready(function(){ 
 
\t 
 
\t /* Hide these items on load. */ 
 
\t $("nav").hide(); 
 
\t $("#hrNavLines2").hide(); 
 
\t $("#usersBar").hide(); 
 
\t $("#videosBar").hide(); 
 
\t $("#albumsBar").hide(); 
 
\t var video = document.getElementById("mainVideo"); 
 
\t 
 
\t $("#hrNavLines1").click(function(){ 
 
\t \t $("#hrNavLines1").hide(); 
 
\t \t $("#hrNavLines2").show(); 
 
\t \t $("nav").show(); 
 
\t }); 
 
\t 
 
\t $("#hrNavLines2").click(function(){ 
 
\t \t $("#hrNavLines2").hide(); 
 
\t \t $("#hrNavLines1").show(); 
 
\t \t $("nav").hide(); 
 
\t }); 
 
\t 
 
\t var opts = document.getElementById("opts"); 
 
\t opts.onchange = function() { 
 
\t \t var selected = opts.options[opts.selectedIndex].value; 
 

 
\t \t switch(selected) { 
 
\t \t \t case "All": 
 
\t \t \t \t $("#allBar").show(); 
 
\t \t \t \t $("#usersBar").hide(); 
 
\t \t \t \t $("#videosBar").hide(); 
 
\t \t \t \t $("#albumsBar").hide(); 
 
\t \t \t \t break; 
 
\t \t \t case "Users": 
 
\t \t \t \t $("#allBar").hide(); 
 
\t \t \t \t $("#usersBar").show(); 
 
\t \t \t \t $("#videosBar").hide(); 
 
\t \t \t \t $("#albumsBar").hide(); 
 
\t \t \t \t break; 
 
\t \t \t case "Videos": 
 
\t \t \t \t $("#allBar").hide(); 
 
\t \t \t \t $("#usersBar").hide(); 
 
\t \t \t \t $("#videosBar").show(); 
 
\t \t \t \t $("#albumsBar").hide(); 
 
\t \t \t \t break; 
 
\t \t \t case "Albums": 
 
\t \t \t \t $("#allBar").hide(); 
 
\t \t \t \t $("#usersBar").hide(); 
 
\t \t \t \t $("#videosBar").hide(); 
 
\t \t \t \t $("#albumsBar").show(); 
 
\t \t } 
 
\t \t 
 
\t \t if (!$("#usersBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) { 
 
\t \t \t $("#hidden").value(0); 
 
\t \t } else if (!$("#allBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) { 
 
\t \t \t $("#hidden").value(1); 
 
\t \t } else if (!$("#allBar").is(":visible") && !$("#usersBar").is(":visible") && !$("#albumsBar").is(":visible")) { 
 
\t \t \t $("#hidden").value(2); 
 
\t \t } else { 
 
\t \t \t $("#hidden").value(3); 
 
\t \t } 
 
\t \t var hidden = document.getElementById("hidden"); 
 
\t \t alert(hidden); 
 
\t } 
 
\t 
 
});

header > #headerTop > #title { 
 
\t font-size: 33px; 
 
\t font-family: Arial; 
 
\t border: 2px solid black; 
 
\t border-radius: 30px; 
 
\t position: absolute; 
 
\t top: 10%; 
 
\t left: 6.5%; 
 
\t padding-left: 7px; 
 
\t padding-right: 7px; 
 
\t padding-top: 3px; 
 
\t padding-bottom: 3px; 
 
} 
 

 
header { 
 
\t background-color: white; 
 
\t position: absolute; 
 
\t top: 0%; 
 
\t left: 0%; 
 
\t padding: 7px; 
 
\t width: 98.9%; 
 
\t height: 7%; 
 
\t border-bottom: 1.5px solid black; 
 
} 
 

 
header a { 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
} 
 

 
nav { 
 
\t position: absolute; 
 
\t top: 93%; 
 
\t left: 0%; 
 
\t background-color: white; 
 
\t border-radius: 5px; 
 
\t border-bottom: 1.5px solid black; 
 
\t border-right: 1.5px solid black; 
 
} 
 

 
a { 
 
\t color: blue; 
 
\t text-decoration: none; 
 
} 
 

 
#hrNavLines1, #hrNavLines2 { 
 
\t position: absolute; 
 
\t top: 5%; 
 
\t left: .5%; 
 
\t cursor: pointer; 
 
\t width: 25px; 
 
} 
 

 
#search { 
 
\t position: absolute; 
 
\t top: 20%; 
 
\t right: 1.75%; 
 
} 
 

 
.searchBar { 
 
\t text-align: center; 
 
\t width: 680px; 
 
\t height: 30px; 
 
\t padding: 3px 10px; 
 
\t margin: 0px 3px; 
 
\t font-size: 17px; 
 
} 
 

 
select { 
 
\t height: 30px; 
 
\t font-size: 17px; 
 
\t margin: 0px 3px; 
 
} 
 

 
#searchBttn { 
 
\t height: 38px; 
 
\t width: 80px; 
 
\t font-size: 17px; 
 
\t border-radius: 5px; 
 
\t margin-left: 3px; 
 
} 
 

 
body { 
 
\t background-color: #EEEEEE; 
 
}

<?PHP 
 
\t require("searchResults.php"); 
 
?> 
 

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

источник

2016-02-02 Adam Oates

'.value()' это не метод использования JQuery '.val()'; также добавить перерыв; в последнем корпусе выключателя – diEcho

Спасибо, что сработали! : D –

* «Весь код работает до тех пор, пока я не вернусь к операторам if» * - и что тогда происходит? Получаете ли вы ошибку в консоли отладки JS вашего браузера? * «Я не знаю, нужен ли вам CSS». * - № – nnnnnn

Изменить этот раздел кода и добавить разрыв в последнем случае. :

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

Вместо того, чтобы:

вар выбран = opts.options [opts.selectedIndex] .value;

Сниппет:

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;

источник

2016-02-02 05:10:00 stark

Это не сработает. Теперь вы пытаетесь вызвать '.val()' для объекта без jquery. '.value' как свойство (а не метод) работает там. Ошибка в коде OP позже, когда он пытается вызвать '.value()' как метод. – nnnnnn

Почему этот оператор JavaScript if не работает?

ответ

Смежные вопросы