在哪里"选择#"来自(哪里?

时间:2017-06-08 18:33:12

标签: javascript jquery

我正在上课。我已经搞乱了类提供的代码。我几乎了解所有事情,但这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();

  });
});

1 个答案:

答案 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 DocsCSS Selectors,详细了解这一切是如何运作的。