Question

我需要创建一个迷你计算器，包括更改输入值，进行一些添加等，然后使用输入值更新div。

$('.skillcount').change(function() {
   var value = parseFloat($(this).val()) / 2;
   alert(value);
   $(".missed").append('value');
});

小提琴： http://jsfiddle.net/5De46/65/

＆＃13;

$('.skillcount').change(function() {
  var value = parseFloat($(this).val()) / 2;
  alert(value);
  $(".missed").append('value');
});

// value from span .missed + 1498
$('.missed').change(function() {
  var value = parseFloat($(this).val()) + 1498;
  alert(value);
  $(".cost").append('value');
});

// value from skillcount - value from '.cost'
$('.skillcount').change(function() {
  var value = parseFloat($(this).val()) - $('.cost');
  alert(value);
  $(".remaining").append('value');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- enter an amount - default 1000 -->
<input type="text" class="skillcount" name="skillcount" value="1000" />

<p>
  <!-- that ammount from skillcount divided by 2 and added into '.missed' -->
  Missed: £
  <span class="missed"></span>
</p>

<p>
  <!-- Take output value of the paragraph '.missed' and + 1498 to it -->
  True Cost: £
  <span class="cost"></span>
</p>

<p>
  <!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
  Remaining: £
  <span class="remaining"></span>
</p>

＆＃13;

我已将所有评论和解释更详细地放在小提琴中。我只是不知道如何从输出中获取值并将它们放入段落中，然后使用这些值进行更基本的计算。

Answer 1

只是出于简单的原因......你已经在＆＃39;值上加上字符串引号＆＃39;

var value = parseFloat($(this).val()) * 2;
  alert(value);
  $(".missed").text('value');

应该是

var value = parseFloat($(this).val()) / 2;
  alert(value);
  $(".missed").text(value);

也..你不能追加（）它不是什么html ..改变你必须.text（）

其次你太开放了$（这个）...这在$（＆＃39; .missed＆＃39;）函数中是空白的。后续因为技能计数的原始值已经改变了......还有很多不需要的变更链......

$('.skillcount').change(function() {
   var skillcount= $(".skillcount").val();

    var missed= parseFloat(skillcount) * 2;         
    $(".missed").text(missed);

    var costValue = parseFloat(missed) + 1498;    
    $(".cost").text(costValue);

     var diffValue = parseFloat(skillcount) - costValue;     
    $(".remaining").text(diffValue);
});

我已经更新了jsfiddle ...你能看看＆＃39;

http://jsfiddle.net/6as9gef0/7/

＆＃13;

$(document).ready(function(){
onSkillCountChange()

$('.skillcount').keyup(function() {
     onSkillCountChange()
});
 
 function onSkillCountChange(){
 		var originalvalue = $(".skillcount").val();
   
    var value = parseFloat(originalvalue) * 2;
     
    $(".missed").text(value);
    
    var costValue = parseFloat(value) + 1498;    
    $(".cost").text(costValue);
    
     var diffValue = parseFloat(costValue) - originalvalue;     
    $(".remaining").text(diffValue);
 }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- enter an amount - default 1000 -->
<input type="text" class="skillcount" name="skillcount" value="1000"/>

<p>
<!-- that ammount from skillcount divided by 2 and added into '.missed' -->
Missed: £
<span class="missed"></span>
</p>

<p>
<!-- Take output value of the paragraph '.missed' and + 1498 to it -->
True Cost: £
<span class="cost"></span>
</p>

<p>
<!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
Remaining: £
<span class="remaining"></span>
</p>

＆＃13;

Answer 2

你非常接近。

在行中：

$(".missed").append('value');

从＆＃39;值＆＃39;中删除引号。您在此处附加一个字符串而不是变量。

$(".missed").text(value);

你也可以使用.html（值）

Answer 3

好的，如果你想改变inmediatly，我建议将.on（'change'，..）更改为.on（'input'，..）。（如果你想改变“提交”，写下.on（'change，..）

另一方面，将.append更改为.text。

示例代码：

 <!DOCTYPE html>
    <html>
    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script text="text/javascript">

    $(document).on('ready',function(){
         $('.skillcount').on('input',function() {
             var valueMissed = parseFloat($(this).val()) / 2;
             alert(valueMissed );
             $(".missed").text(valueMissed);

             var valueCost = valueMissed + 1498;
            alert(valueCost );
            $(".cost").append(valueCost);

            var valueRemaining = parseFloat($(this).val()) - valueCost 
            alert(valueRemaining );
            $(".remaining").append(valueRemaining );
    });
    </script>


    </head>
    <body>
    <!-- enter an amount - default 1000 -->
    <input type="text" class="skillcount" name="skillcount" value="1000" />

    <p>
      <!-- that ammount from skillcount divided by 2 and added into '.missed' -->
      Missed: £
      <span class="missed"></span>
    </p>

    <p>
      <!-- Take output value of the paragraph '.missed' and + 1498 to it -->
      True Cost: £
      <span class="cost"></span>
    </p>

    <p>
      <!-- Value of skillcount 'minus' value of the paragraph '.cost' -->
      Remaining: £
      <span class="remaining"></span>
    </p>

    </body>
    </html>

jQuery更新div，输入值为onChange

3 个答案: