可以在类中使用.val吗？

Question

我对编程相当陌生，并且被困在我认为会很容易的事情上！我正在创造一辆汽车的制造，模型和年份。我正在查找用户在输入文本框中键入的内容的值，并将其打印在页面的顶部。我能够用ID找到值，但是当我试图使它成为一个类时，它不允许我打印出来。有人能解释一下这件事吗？谢谢你！！

以下是我的HTML和JS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="carJquery.js"></script>
    <link rel="stylesheet" href="carjquerystylesheet.css">
    <title>Olivia's Car Challenge</title>
    <link href='https://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <!--where your car make model and year will go-->
    <h3 id="carName">Your Car </h3></br>
    <h4 id="responseToUsersChangeInSpeed"></h4></br>
    <h4 id="currentSpeed"></h4>
    <!--we want a place for text entry for people to enter in their car info-->
    <label for="make" class="make">Enter Make</label>
    <input type="text" class="make" value="" name="make"/></br>
    <label for="model" class="model" >Enter Model</label>
    <input type="text" class="model" value="" name="model"/></br>
    <label for="year" class="year" >Enter Year</label>
    <input type="text" class="year" value="" name="year"/></br>
    <input id="createCarButton" type="button" value="Create My Car"/>

    <!--a button for increase speed-->
    <input id="accelerateButton" type="button" value="Accelerate"/>

    <!--a button for decrease speed-->
    <input id="brakeButton" type="button" value="Brake"/>

    <!--a button for the fluid increase to 70 and decrease back to 0-->
    <input id="fluidIncreaseDecreaseButton" type="button" value="Surprise!"/>

  </body>
</html>

JS文件：

$(document).ready(function() {
    //allows us to change the speed of the car
      var speed = 0;
      var maxSpeed = 85;
      var brakeRate = Math.floor((Math.random()*6) + 5); //sets to a random rate between 5 and 10
      var accelerateRate = Math.floor((Math.random()*21) + 10); //sets to a random rate between 10 and 30

    //A function to create the car based on the user's input
    $("#createCarButton").click (function() {
      //Create a variable to hold a string of the user's input
      var nameOfCar = $(".make").val() + ", " + $(".model").val() + ", " + $(".year").val();
      //Change the carName header to reflect the user's nameOfCar
      $("#carName").html(nameOfCar);
      //updating the user with their speed
      $("#currentSpeed").html("Your current speed is: " + speed);
      //Hide the user input boxes after the car has been created
      $(".make").hide();
      $(".model").hide();
      $(".year").hide();
      $("#createCarButton").hide();
    });

    //function which runs when the user clicks on the "Accelerate" button
    $("#accelerateButton").click(function accelerate(){
      //If they've already hit their max speed, and they still try to accelerate...
      if (speed === maxSpeed){
        //...inform them that they can't
        $("#responseToUsersChangeInSpeed").html("You can't go any faster!!");
      }
      //Otherwise, if the rate of their acceleration is less than or equal to the difference between the maxSpeed, and their speed, allow them to accelerate
      else if (accelerateRate <= (maxSpeed - speed)){
        //increase their speed by the accelerateRate
        speed += accelerateRate;
        //tell them how fast they're going
        $("#currentSpeed").html("Your current speed is: " + speed);
      }
      //Otherwise, the accelerateRate would take them over the maxSpeed, so we only let them go as fast as the maxSpeed
      else {
        //change their speed to the maxSpeed
        speed = maxSpeed;
        //tell them they've hit the max speed
        $("#responseToUsersChangeInSpeed").html("You've hit your max speed of " + maxSpeed + ". Don't even try to go faster.");
        //tell them how fast they're going
        $("#currentSpeed").html("Your current speed is: " + speed);
      }
    });

    $("#brakeButton").click(function(){
      if (speed === 0) {
        $("#responseToUsersChangeInSpeed").html("You are already at a dead stop.");
      }
      else if(brakeRate <= speed) {
        speed -= brakeRate;
        //tell them how fast they're going
        $("#currentSpeed").html("Your current speed is: " + speed);
      }
      else {
        speed = 0;
        $("#responseToUsersChangeInSpeed").html("You've come to a complete stop.");
        $("#currentSpeed").html("Your current speed is: " + speed);
      }
    });

    $("#fluidIncreaseDecreaseButton").click(function(){
      maxSpeed = 70;
      while(speed < maxSpeed) {
        $("#accelerateButton").click();
        $("#currentSpeed").html("Your current speed is: " + speed);
        console.log(speed);
      };
      while(speed > 0) {
        $("#brakeButton").click();
        $("#currentSpeed").html("Your current speed is: " + speed);
        console.log(speed);
      };
      $("#brakeButton").click();
    });
});

Answer 1

由于HTML代码包含多个元素和所需的类，所以使用$(".make")选择所有具有类"make“的元素。它还选择了与HTML中出现的顺序相关的顺序。因此，当HTML中的第一个"make“元素是"label”，第二个是"input“时，它们在jQuery选择结果中的排序是相同的：[<label>, <input>]

当为.val()选择结果调用jQuery时，它将返回结果中第一个元素的值。而且，由于第一个元素是“标签”，它不是表单输入(“输入”、“按钮”、“文本区域”或“选择”)，所以$(".make").val()返回空字符串。

要选择和使用确切的“输入”元素的值，需要使用$("input.make").val()、$("input.model").val()和$("input.year").val()指令。

此外，还可以选择带有名称的表单元素：$('input[name="make"]')，甚至$('[name="make"]')。会是这样的：

var nameOfCar = $('[name="make"]').val() + ", " + $('[name="model"]').val() + ", " + $('[name="year"]').val();

但是，我认为，更易读的变化是：

var nameOfCar = $("input.make").val() + ", " + $("input.model").val() + ", " + $("input.year").val();

Answer 2

问题是，您要为输入和标签分配相同的类名。因此，jquery不知道使用哪一个

Answer 3

$(".make").val()不会返回任何内容，因为您有两个带有class="make"标签和输入的元素，而且由于标签位于DOM中的第一个位置，所以$(".make").val()将尝试获取标签的值。

尝试将代码更改为$("input.make").val() --这将得到class="make“输入的值。

selectors.asp对jQuery选择器的工作原理有很好的解释。