Question

我是JS的新手并且遇到了以下问题：

我希望通过值的任何更改来转换旁边答案中数字框中的值。包括HTML元素中的变量NP0，NP1和DP0。

-------------------------更新1 -------------------- ------

要在javascript中使用html变量，我们可以通过data- *属性来实现。感谢Luca。

但是，当第一次加载页面时，如何启动计算呢？

如何在值的任何变化上执行计算？

＆＃13;

    $(".slide").on('change mousemove', function() { 
      $(this).next(".text").text(this.value)
    });
    $(".calc").on('change paste keyup', function() {  
      $(this).next(".text").text((128+(this.value*0.0625))/1)
    });

＆＃13;

<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>

<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>

<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= <label class="text"></label> km/h

＆＃13;

Answer 1

您需要data- *属性，因此您的HTML应该是

<input name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range"><label class="text">0.25</label>
<br>
<br>
<input name="period" class="calc" value="0" min="0" max="4096" type="number" data-NP0="128" data-NP1="0.00625" data-DP0="1">= <label class="text"></label> km/h

和你的脚本

 $(".slide").on('change mousemove', function() { 
      $(this).next(".text").text(this.value)
 });
$(".calc").on('change paste keyup', function() {  
  $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"))
});

更新1

要在订阅所需事件时立即计算您的价值，您可以使用触发器强制更改＆＃34;事件，所以你的脚本应该是

  $('.calc').on('change paste keyup', function(){
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
  }).trigger('change');

抱歉，我错过了一点:) 要在使用按钮旋转的同时获得连续计算，您可以添加＆＃34;输入＆＃34;事件，所以你的代码变成了

  $('.calc').on('change paste keyup input', function(){
    $(this).next(".text").text(($(this).data("np0")+(this.value*$(this).data("np1")))/$(this).data("dp0"));
  }).trigger('change');

我再次更新了小提琴

Here a jsfiddle

Answer 2

     <html>
        <head> 
            <script src="http://code.jquery.com/jquery-2.2.2.min.js">/script>
            <script type="text/javascript">
    function Load(){
            $(document).ready(function(){
                 $(".slide").on('change mousemove', function() {
                 $(this).next(".text").text(this.value);

                 });
                     $(".calc").on('change paste keyup', function() {
                     var value = $('#abc').val();  
                    $(this).next(".text").text((128+ value*0.0625)/1)
                });
            });
}
            </script>
        </head>
        <body onLoad="Load()">
            <input id="period" name="period" class="slide" value="0.25" min="0" max="0.5" step="0.01" style="width: 15em;" type="range">

            <label class="text">0.25</label>        <br><br>

            <input id ="abc" name="period" class="calc" value="0" min="0" max="4096" type="number" NP0="128" NP1="0.00625" DP0="1">= 
            <label class="text"></label> km/h
        </body>
    </html>

你可以使用id并通过它获取值将更新，希望它能帮助

HTML：通过javascript（jquery）进行实时计算，包括初始化变量

2 个答案: