Question

我正在从事个人项目。我附上了GUI的屏幕截图。

基本上我正在尝试增加/减少标记为“Set Temp”的H3标签内的值

当我点击“向上”按钮时，我希望它将“temp”增加1deg，反之亦然“

我尝试过使用其他帖子的代码： 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) + '&deg;'; // 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

首先在温度的数值周围添加一个范围（70°，然后添加以下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);
    }
});

使用度数值增加/减少值

3 个答案: