Question

每当您从<input type = "hidden" name = "hidden" id = "hidden" value = "0">标记中选择一个下拉选项时，我都会尝试更改<select>的值。所有代码都工作，直到我到达if语句。请帮帮我，谢谢。这是我的代码。我不知道你是否需要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

更改代码的这一部分，并在最后一个案例中添加一个中断。：

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

而不是：

var selected = 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;

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

1 个答案: