我正在上课。我已经搞乱了类提供的代码。我几乎了解所有事情,但这userAnswer += parseInt($("select#" + blank).val());
select#
来自哪里它并没有让我感觉到,但它似乎必须存在,因为每当我改变任何东西时,代码都会破坏。谢谢你的时间!
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.0.js"></script>
<script src="js/scripts.js"></script>
<title>Vacation</title>
</head>
<body>
<div class="jumbotron">
<h1>Vacation's All I Ever Wanted</h1>
</div>
<div class="container">
<div id="vaca">
<br>
<p>Not sure where you should go on your next vacation? Well hopefully this quiz will help! All languages must take Intro and Javascript :(</p>
<hr>
<div id="blanks">
<form>
<div class="form-group">
<label for="fun">What do you like to do for fun while traveling?</label>
<select class="form-control" id="fun">
<option value="3">Going to latest hipster cafe's</option>
<option value="2">Eating street food</option>
<option value="1">Skiing</option>
<option value="2">Explore the jungle</option>
</select>
</div>
<div class="form-group">
<label for="weather">What is your idea of perfect weather?</label>
<select class="form-control" id="weather">
<option value="1">Snow</option>
<option value="2">Hot and humid</option>
<option value="1">Cold</option>
<option value="3">Sunny and perfect weather year round</option>
</select>
</div>
<div class="form-group">
<label for="food">What kind of food do you like?</label>
<select class="form-control" id="food">
<option value="3">Mexican</option>
<option value="2">Thai</option>
<option value="1">Scandinavian</option>
</select>
</div>
<div class="form-group">
<label for="language">How important is it that the place location English?</label>
<select class="form-control" id="language">
<option value="2">Not important</option>
<option value="1">Somewhat important</option>
<option value="3">Very</option>
</select>
</div>
<div class="form-group">
<label for="music">What kind of music do you like?</label>
<select class="form-control" id="music">
<option value="3">Everything</option>
<option value="2">World</option>
<option value="1">Folk</option>
</select>
</div>
<br>
<button type="submit" class="btn inthemiddle">Tell me where to go</button>
</form>
<hr>
</div>
</div>
<div id="thai">
<br>
<button id="redoThai" type="button" class="btn inthemiddle">Try again</button>
<hr>
<h2>Miss Cleo says to go here</h2>
<div class="row">
<div class="col-lg-12">
<h3>Thailand</h3>
<p>You should go to Thailand where they have delicious and cheap street food. The language barrier and weather will not be an issue for you</p>
</div>
</div>
</div>
<div id="la">
<br>
<button id="redoLa" type="button" class="btn inthemiddle">Try again</button>
<hr>
<h2>Miss Cleo says to go here:</h2>
<div class="row">
<div class="col-lg-12">
<h3>Los Angeles, California USA</h3>
<p>You should go to sunny Los Angeles where the weather is always amazing and you can experience some of the best $1 Tacos. LA is a fantasic place for music, you will find that the music scene is very diverse.</p>
</div>
</div>
</div>
<div id="scand">
<br>
<button id="redoScand" type="button" class="btn inthemiddle">Try again</button>
<hr>
<h2>Miss Cleo says to go here:</h2>
<div class="row">
<div class="col-lg-12">
<h3>Any Scandavian Country</h3>
<p>You should go to any Scandavian country. You will enjoy the weather, outdoors activities, and food!</p>
</div>
</div>
</div>
<div id="none">
<br>
<button id="redoNone" type="button" class="btn inthemiddle">Try again</button>
<hr>
<h2>Miss Cleo says to go nowhere:</h2>
<div class="row">
<div class="col-lg-12">
<h3>None</h3>
<p>Miss Cleo can tell that you don't like to travel so just stay home</p>
<img src="img/rapper.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
JS
$(document).ready(function() {
$("#blanks form").submit(function(event) {
var topics = ["fun", "food", "music", "language", "weather"];
var userAnswer = 0;
topics.forEach(function(blank) {
userAnswer += parseInt($("select#" + blank).val());
});
if (userAnswer <= 5) {
$("#scand").show();
$("#vaca").hide();
}
else if (userAnswer === 6 || userAnswer >= 8 && userAnswer <= 10) {
$("#thai").show();
$("#vaca").hide();
}
else if (userAnswer === 11 || userAnswer >= 13) {
$("#la").show();
$("#vaca").hide();
}
else if (userAnswer === 7 || userAnswer === 12) {
$("#none").show();
$("#vaca").hide();
}
$("#redoThai").click(function() {
location.reload();
});
$("#redoLa").click(function() {
location.reload();
});
$("#redoScand").click(function() {
location.reload();
});
$("#redoNone").click(function() {
location.reload();
});
event.preventDefault();
});
});
答案 0 :(得分:0)
def subStringEn(input:String,start:Int,end:Int)={
// multiple if check for avoiding index out of bound exception
input.substring(start,end)
}
是一个DOM元素。 select
表示我们正在寻找具有给定#
属性的select
。此选择器之后的id
只是字符串和变量的串联。它一起创建了一个选择器。
示例:
blank
您的脚本正在执行此操作,因此它可以根据与变量// Javascript
var blank = "theid";
var obj = $("select#" + blank);
// HTML
<select id="theid"></select>
对应的ID选择变量select
元素。
这是一个相当基本的概念,因此我强烈建议您阅读jQuery Selector Docs和CSS Selectors,详细了解这一切是如何运作的。