使用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文档：

获取匹配元素集合中第一个元素的当前值。

​

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>

​

Answer 2

假设从输入框中检索所有变量，同时使用Number()将变量乘以数字

var result = Number(stellplaetze) * Number(miete) * 30;

html中有多个具有相同类的元素。若要使用miete和stellplaetze类选择输入，请使用input .classname作为jquery选择器

function output() {
        var stellplaetze = $('input.stellplaetze').val();
        var miete = $('input.miete').val();
        var result = Number(stellplaetze) * Number(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 3

在许多元素上具有相同的类名，而jQuery方法上的val()文档表示

获取匹配元素集中第一个元素的当前值，或设置每个匹配元素的值。

因此，要么迭代元素数组，要么更改输入元素的类名。