javascript - "[object Object]"不是有效的数字 jquery slider

Question

下面是我的 4 个输入的 html 代码。我使用 jquery ui slider 来表示这些百分比字段。

               <div class="turnover">
                      <label for = "{{  form.turnover.id_for_label  }}">Umsatz des verkauften Artikels am Gesamtumsatz</label>

                      {{ form.turnover }}

                      <div id="turnover_slider"></div>

                      {{ form.turnover.errors }}
                </div>

              <div class="clear"></div>

                <div class="sold_qty">  
                      <label for = "{{  form.sold_qty.id_for_label  }}">Zahl der verkauften Menge des Artikels zur gesamten Absatzmenge</label>

                        {{ form.sold_qty }}

                      <div id="sold_qty_slider"></div>

                      {{ form.sold_qty.errors }}
                </div>

              <div class="clear"></div>

                <div class="produced_qty">
                      <label for = "{{  form.produced_qty.id_for_label  }}">Zahl der produzierten Menge des Artikels relativ zur gesamten Produktmenge</label>

                        {{ form.produced_qty }}

                      <div class="produced_qty_slider"></div>         

                        {{ form.produced_qty.errors }}
                </div>

              <div class="clear"></div>

                <div class="var_pay">
                        <label for = "{{  form.var_pay.id_for_label  }}">Prozent der variablen Verg&uuml;tung an der Gesamtverg&uuml;tung</label>

                        {{ form.var_pay }}

                        <div class="var_pay_slider"></div>
                        {{ form.var_pay.errors }}
                    </div>

              <div class="clear"></div>

                    <div class="contracts">
                        <label for = "{{  form.contracts.id_for_label  }}">Anzahl der abgeschlossenen Vertr&auml;ge im Veranlagungszeitraum</label>
                        {{ form.contracts }}
                        {{ form.contracts.errors }}
                </div>

Jquery 代码是

$( "#turnover_slider" ).slider({
      range: "max",
      min: 1,
      max: 100,

      slide: function( event, ui ) {
        $( "#id_turnover" ).val( ui.value );
      }
    });
$( "#id_turnover" ).val( $( "#turnover_slider" ).slider( "value" ) );




$( "#sold_qty_slider" ).slider({
      range: "max",
      min: 1,
      max: 100,
      slide: function( event, ui ) {
        $( "#id_sold_qty" ).val( ui.value );
      }
    });
$( "#id_sold_qty" ).val( $( "#sold_qty_slider" ).slider( "value" ) );



$( "#var_pay_slider" ).slider({
      range: "max",
      min: 1,
      max: 100,
      slide: function( event, ui ) {
        $( "#id_var_pay" ).val( ui.value );
      }
    });
$( "#id_var_pay" ).val( $( "#var_pay_slider" ).slider( "value" ) );

slider 适用于前 2 个输入字段(即营业额和已售数量字段)。但它不适用于 Produce_qty 和 var_pay。它会抛出错误“[object Object]”不是有效数字”。需要您的专家帮助。

Answer 1

对于前两种情况，您对 DOM 元素的 id 正确如下:

<div id="turnover_slider"></div>
<div id="sold_qty_slider"></div>

但对于其余两个，您分配的是class，而不是id。请更正:

<div class="produced_qty_slider"></div>
<div class="var_pay_slider"></div>

或者更改 JS 代码以更改它们的 jQuery 选择器:

$( ".produced_qty_slider" ).slider({

$( ".var_pay_slider" ).slider({