HTML：通過JavaScript（jQuery的），實時計算包括初始化

我很新的JS和具有以下問題蔣張關係變量：HTML：通過JavaScript（jQuery的），實時計算包括初始化

我想禾旁邊通過的任何變化的值轉換在回答numberbox價值。包含HTML元素中的變量NP0，NP1和DP0。

------------------------- UPDATE 1 ------------------- -------

要在javascript中使用html變量，我們可以通過data- *屬性來實現。感謝盧卡。

但是我怎麼能intitiate計算，當頁面加載第一次？

如何對任何值的更改執行計算？

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

<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

來源

2016-07-27 stahlstngel

你爲什麼1第二分離到你的JavaScript的最後一行？ – kamoroso94

因爲規範配置了這個，但這只是一個標準的例子。 – stahlstngel

調用身體負載事件的第一次頁面加載和$（this）.next（）正在爲你工作 –

你需要數據 - *屬性，所以你的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

要立即計算出你的價值，當您訂閱所需的事件，您可以使用觸發器強制「變」事件，使你的腳本應該是

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

對不起，我錯過一個點:) 要獲得連續計算而與旋轉按鈕，可以添加「輸入」活動，讓你的代碼變得

$('.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

來源

2016-07-27 15:31:22 Luca

不，不需要幻燈片值。 – stahlstngel

太好了。謝謝，這解決了我的第一個問題。當我加載頁面時如何啓動計算？是否有一種方法可以對每次更改值執行計算（例如，當我單擊並按住此值時）？ – stahlstngel

美味！這解決了我所有的問題，並且運作良好。大。謝謝你的幫助。 – stahlstngel

-1

 <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並獲得通過它的值將希望更新它會幫助

來源

2016-07-28 09:18:25

HTML：通過JavaScript（jQuery的），實時計算包括初始化

回答

相關問題