javascript - 使用 JQuery 的简单添加功能

Question

我正在尝试用 jQuery 编写一个非常简单的函数，我在其中添加两个输入字段(类型文本)的输入值并输出结果。

我得到 NaN 或没有结果。已经用 parseInt() 尝试过，但也没有成功。

我做错了什么？

function output() {
        var stellplaetze = $('.stellplaetze').val();
        var miete = $('.miete').val();
        var result = stellplaetze * miete * 30;
        $('.result').html(
          '<strong class="text-uppercase">Ertrag pro Monat: </strong><br> ' +
            result +
            ' EUR'
        );
      }
      
$(function() {
    // Trigger the function
    $('button').on('click', function() {
      output();
      $('#ertragsrechner .result').css('opacity', 1);
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="formbody">
        <input type="hidden" name="FORM_SUBMIT" value="auto_form_5">
        <input type="hidden" name="REQUEST_TOKEN" value="pC9vYIP8oBzVONQiwg-ixrLwDhEdK0LA8-5n-6kQJPw">
        <div class="widget widget-text stellplaetze">
            <input type="text" name="stellplaetze" id="ctrl_12"
                class="text stellplaetze form-control flex-fill mr-0 mr-sm-2 mb-3" value=""
                placeholder="Anzahl der Stellplätze">
        </div>
        <div class="widget widget-text miete">
            <input type="text" name="miete" id="ctrl_13" class="text miete form-control flex-fill mr-0 mr-sm-2 mb-3"
                value="" placeholder="Miete pro Tag">
        </div>
        <div class="widget widget-submit add">
            <button type="submit" id="ctrl_15" class="submit add btn btn-primary">Ertrag berechnen</button>
        </div>
        <div class="widget widget-explanation explanation result">
            <p>Ertrag Pro Monat</p>
        </div>
    </div>

Answer 1

实际上，问题在于选择器更具体，因为有多个元素具有相同的类名。在您的情况下，您可以添加 input 以及类选择器。

默认 jQuery val()方法只是检索集合中第一个元素的值，在您的例子中，它是 div 元素。

来自 jQuery 文档:

Get the current value of the first element in the set of matched elements

function output() {
  var stellplaetze = $('input.stellplaetze').val();stellplaetze
  // here --------------^^^^^^---------
  var miete = $('input.miete').val();
  // here -------^^^^^^---------
  var result = stellplaetze * miete * 30;
  $('.result').html(
    '<strong class="text-uppercase">Ertrag pro Monat: </strong><br> ' +
    result +
    ' EUR'
  );
}

// Trigger the function
$('#ertragsrechner button').on('click', function() {
  output();
  $('#ertragsrechner .result').css('opacity', 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ertragsrechner">
  <div class="formbody">
    <input type="hidden" name="FORM_SUBMIT" value="auto_form_5">
    <input type="hidden" name="REQUEST_TOKEN" value="pC9vYIP8oBzVONQiwg-ixrLwDhEdK0LA8-5n-6kQJPw">
    <div class="widget widget-text stellplaetze">
      <input type="text" name="stellplaetze" id="ctrl_12" class="text stellplaetze form-control flex-fill mr-0 mr-sm-2 mb-3" value="" placeholder="Anzahl der Stellplätze">
    </div>
    <div class="widget widget-text miete">
      <input type="text" name="miete" id="ctrl_13" class="text miete form-control flex-fill mr-0 mr-sm-2 mb-3" value="" placeholder="Miete pro Tag">
    </div>
    <div class="widget widget-submit add">
      <button type="submit" id="ctrl_15" class="submit add btn btn-primary">Ertrag berechnen</button>
    </div>
    <div class="widget widget-explanation explanation result">
      <p>Ertrag Pro Monat</p>
    </div>
  </div>
</div>