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中有多个具有相同类的元素。要选择具有class 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

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

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

因此，您必须遍历elements数组或更改输入元素的类名

使用JQuery

3 个答案: