Question

我创建了一个滑块，可以满足我的需求。但我不想在输入中显示输出值。

这是我的Codepen： https://codepen.io/anon/pen/MOZGVx?editors=1010

＆＃13;

$( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").val();
     $optionb = $("#optionb").val();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").val($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").val(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").val());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").val(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").val());
    }
});

update();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <input type="text" id="optiona" value="12" disabled /><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <input type="text" id="optionb" value="30" disabled/><br /><br /><br />

Sum
<input id="totalsum" type="text" disabled/><br />

＆＃13;

我想要的是什么： 我希望输出不会显示在输入中，而是显示在跨度或类似的内容中。

我已经尝试了

<span type="text" id="optionb"></span>

但它没有奏效:(

真正的专家还有一个问题：如何以完整的货币价值显示总数，例如145.50而不是145.5。

非常感谢你们！

Answer 1

如果要在span中写入，则必须使用.text（）而不是.val（）

Answer 2

正如 MenuItem42 所述，当你使用div，span等时，你只需要使用jQuery的text()函数而不是val()。另外，不要指定{ {1}} type的属性，因为它不支持它。

span

$( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").text();
     $optionb = $("#optionb").text();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").text($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").text(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").text());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").text(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").text());
    }
});

update();
});

显示输出不在输入中

2 个答案: