在jQuery中选择选项之和时，无法找到整数，还是找不到整数错误？

Question

​

$(document).ready(function(){
        $("#selectFirst").on('change',function(){
          var integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })
        $("#selectSecond").on('change',function(){
          var string=$(this).attr('selected','selected').val();
          $("#text2").html(string);
        })
        $("#selectThird").on('change',function(){
          var mix=$(this).attr('selected','selected').val();
          $("#text3").html(mix);
        })
        $("#addBtn").click(function(){
          var grandTotal= integer + string + mix;
          $("#total").html(grandTotal);
        })
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper p-5">
      <div class="row">
        <div class="col-md-8 center-block card p-3 mb-4">
          <div class="row">
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectFirst">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectSecond">
                <option selected>Choose...</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectThird">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="two">two</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-6">
              <div class="card bg-primary text-white">
                <div class="card-body">
                  <ul class="list-unstyled">
                    <li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
                    <li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
                    <li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
                    <li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
                    <input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- row-closed-->
    </div>

​

在这里的代码片段中，您可以看到我正在使用的html和jquery。当我从select选项中选择值时，它们将被附加到卡片上，其中首先为select选项，selected1为select选项，selected2为select选项2，selected3为select选项第三，当我单击按钮total时，我想要所有选定值的总数，但是有一个错误。

整数未定义

Answer 1

在按钮处理程序上下文中没有定义变量integer, string, mix。

您在前面每个处理程序的作用域中分别定义了它们，但没有在按钮中定义它们。您可以让它们的作用域位于按钮处理程序的上方，这样就可以访问它们，或者执行如下操作：

$("#addBtn").click(function(){
    var integer=$('#selectFirst').val();
    var string=$('#selectSecond').val();
    var mix=$('#selectThird').val();
    $("#total").html(integer + string + mix);
})

Answer 2

尝尝这个。代码的问题是，您没有全局声明变量，这在您的情况下是需要的。

​

$(document).ready(function(){
var integer = string = mix = '';
        $("#selectFirst").on('change',function(){
          integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })
        $("#selectSecond").on('change',function(){
          string=$(this).attr('selected','selected').val();
          $("#text2").html(string);
        })
        $("#selectThird").on('change',function(){
          mix=$(this).attr('selected','selected').val();
          $("#text3").html(mix);
        })
        $("#addBtn").click(function(){
          var grandTotal= integer + string + mix;
          $("#total").html(grandTotal);
        })
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper p-5">
      <div class="row">
        <div class="col-md-8 center-block card p-3 mb-4">
          <div class="row">
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectFirst">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectSecond">
                <option selected>Choose...</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
              </select>
            </div>
            <div class="col-md-2">
              <select class="custom-select form-control" id="selectThird">
                <option selected>Choose...</option>
                <option value="1">1</option>
                <option value="two">two</option>
                <option value="3">3</option>
              </select>
            </div>
            <div class="col-md-6">
              <div class="card bg-primary text-white">
                <div class="card-body">
                  <ul class="list-unstyled">
                    <li><b>Selected-1:</b><span class="ml-3" id="text1"></span></li>
                    <li><b>Selected-2:</b><span class="ml-3" id="text2"></span></li>
                    <li><b>Selected-3:</b><span class="ml-3" id="text3"></span></li>
                    <li class="mb-3"><b>Total:</b><span class="ml-3" id="total"></span></li>
                    <input type="button" name="add-btn" value="Add" class="btn btn-danger" id="addBtn">
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div><!-- row-closed-->
    </div>

​

Answer 3

在函数之外定义整数、字符串和混合，这就是为什么它们是未定义的--它们在不同的作用域中。

   var integer = "";
   $("#selectFirst").on('change',function(){
          integer=$(this).attr('selected','selected').val();
          $("#text1").html(integer);
        })