显示不在输入中的输出

Posted 2023-05-08

【中文标题】显示不在输入中的输出

【英文标题】：Show output not in an input

【发布时间】：2018-05-15 12:32:40

【问题描述】：

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

这是我的 Codepen： 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。

非常感谢你们！

【问题讨论】：

<span> 标签不需要type 属性并将输出放在span 中，您可以使用.text() 或.html() 而不是.val()，因为span标签没有价值。 另外不要使用多个相同的ID。 ID 应该是唯一的，对多个/组元素使用 class。

【参考方案1】：

正如 MenuItem42 所述，当您使用 div、span 等时，您只需要使用 jQuery 的 text() 函数而不是 val()。另外，不要指定 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();
);

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

【讨论】：

啊太棒了，你能帮我把总和“扩展”成 X.XXX,XX 类型吗？所以，当结果只有 320 时，它应该显示 320,00。或者这是一件疯狂的事情？

【参考方案2】：

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