度数の増減値

Question

私は個人的なプロジェクトに取り組んでいます。私は自分のGUIのスクリーンショットを添付しました。

基本的に私は私は私はそれが1degで「一時」を増やしたい「アップ」ボタンとその逆をクリックすると、「設定する温度」

ラベルH3タグ内に値を増加/減少しようとしています「下へ」ボタン。私は他の記事からのコードを使用してみました

： justGage - increase and decrease value with buttons

Increase counter value upon button click

が、私はJSを使用するときに失わ少しです。どんな助けもありがとう！

私が試したものは私が探していたものと一致しなかったので（少なくとも私の理解では）スクリプト機能は含まれていませんでした。スクリーンショットのための

私のマークアップは以下の通りです：

<div class="col-md-6"> 
    <div class="form-block center-block pl-10 light-gray-bg border-clear"> 
     <h3 class="h3">Current Temp</h3> 
      <h3 class="h2" name="CurrentTemp" id='CurrentTemp' value='70'>70&deg;</h3> 
    </div> 
    <div class="form-block center-block p-30 light-gray-bg border-clear"> 
     <h3 class="h2">Set Temp</h3> 
     <h3><span id="amountSpan">70&deg;</span></h3> 
      <button id="inc" type="Button" class="btn btn-danger"><i class="fa fa-angle-up"></i></button> 
      <button id="dec" type="Button" class="btn btn-primary"><i class="fa fa-angle-down"></i></button>   
    </div>  
</div> 

Gui Screenshot

Answer 1

バインドクリックイベントハンドラ、内部のイベントハンドラをボタンをクリックします。

$('#inc,#dec').click(function() { // bind click event for both buttons 
 
    var $this = this; // store the reference 
 
    $('#amountSpan').html(function(i, v) { // get htnl content for updating 
 
    v = Number(v.match(/\d+(\.\d+)?/)[0]); // get current value and parse it to number 
 
    return ($this.id == 'inc' ? v + 1 : v - 1) + '°'; // based on clicked button decrement or increment 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-md-6"> 
 
    <div class="form-block center-block pl-10 light-gray-bg border-clear"> 
 
    <h3 class="h3">Current Temp</h3> 
 
    <h3 class="h2" name="CurrentTemp" id='CurrentTemp' value='70'>70&deg;</h3> 
 
    </div> 
 
    <div class="form-block center-block p-30 light-gray-bg border-clear"> 
 
    <h3 class="h2">Set Temp</h3> 
 
    <h3><span id="amountSpan">70&deg;</span></h3> 
 
    <button id="inc" type="Button" class="btn btn-danger"><i class="fa fa-angle-up"></i>+ 
 
    </button> 
 
    <button id="dec" type="Button" class="btn btn-primary"><i class="fa fa-angle-down"></i>- 
 
    </button> 
 
    </div> 
 
</div>

Answer 2

このお試しください：以前の値に基づいて値を更新

$(document).ready(function() { 
    $("#inc").click(function() { 
     var txt = $("#amountSpan").text(); 
     var suffix = txt.match(/\d+/); 
     var num = suffix[0]; 
     num = parseInt(num) + 1; 
     $("#amountSpan").text(num+String.fromCharCode(176)); 
    }); 

    $("#dec").click(function() { 
     var txt = $("#amountSpan").text(); 
     var suffix = txt.match(/\d+/); 
     var num = suffix[0]; 
     num = parseInt(num) - 1; 
     $("#amountSpan").text(num+String.fromCharCode(176)); 
    }); 
}); 

Answer 3

その後、リンクの質問については動作しません正確にどのような次のJavaScriptコード

$('#inc').click(function(){ 
    var counter = $('#amountSpan').text(); 
     counter++ ; 
     $('#amountSpan').text(counter); 
}); 
$('#dec').click(function(){ 
    var counter = $('#amountSpan').text(); 
    if(counter!="1"){ 
     counter-- ; 
    $('#amountSpan').text(counter); 
    } 
});