显示不在输入中的输出

Question

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

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

$( 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();
});

<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 />

我想要的： 我希望输出不显示在输入中，而是显示在跨度或类似的东西中。

我已经用

试过了

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

但是没有用:(

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

非常感谢你们！

Answer 1

当你想在 span 中写入时，你必须使用 .text() 而不是 .val()

Answer 2

如 MenuItem42 所述，当您使用 div、span 等时，您只需要使用 jQuery 的 text() function instead of val() . 另外，不要为 span 指定 type 属性，因为它不支持它。

$( 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();
});

<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: <span id="optiona">12</span><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <span id="optionb">30</span><br /><br />

Sum
<span id="totalsum"></span>

显示不在输入中的输出

Show output not in an input

javascript

jquery

jquery-ui

jquery-ui-slider