使用加号/减号按钮更改 class "data-value"？

Question

所以所有教程都展示了如何使用加号和减号按钮更改简单输入 "value"。

这是我的问题，我该如何更改 class "data-value"？

$(document).on('click','.value-control',function(){
    var action = $(this).attr('data-action')
    var target = $(this).attr('data-target')
    var dataValue  = parseFloat($('[id="'+target+'"]').val());
    if ( action == "plus" ) {
      value++;
    }
    if ( action == "minus" ) {
      value--;
    }
    $('[id="'+target+'"]').data("value", (value));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I want to change the "data-value" value here (it's a meter gauge lots of JS -->

<div class="gauge" id="guagechanger" data-plugin="gauge" data-value="1" data-min-value="1" data-max-value="10" data-stroke-color="#f978a6">
         <div class="gauge-label"></div>
         <canvas width="200" height="150"></canvas>
</div>

<!-- my plus and minus buttons -->

<button type="button" class="btn btn-floating btn-danger value-control" data-action="minus" data-target="guagechanger"><i class="icon wb-minus" aria-hidden="true"></i></button>

<button type="button" class="btn btn-floating btn-danger value-control" data-action="plus" data-target="guagechanger"><i class="icon wb-plus" aria-hidden="true"></i></button>

Answer 1

根据 jquery .data() :

var target = $(this).data('target');

更改数据属性：

$(this).data('target', value);

Answer 2

你们真的很亲密，

只是不用去 target.val() 你需要去 taget.data('value'), 你对变量名有点困惑。

这是一个工作片段

$(document).on('click','.value-control',function(){
    var action = $(this).attr('data-action');
    var target = $(this).attr('data-target');
    var value  = parseFloat($('#'+target).data('value'));
    if ( action == "plus" ) {
      value++;
    }
    if ( action == "minus" ) {
      value--;
    }
    console.log(value);
    $('#'+target).data("value", (value));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- I want to change the "data-value" value here (it's a meter gauge lots of JS -->

<div class="gauge" id="guagechanger" data-plugin="gauge" data-value="1" data-min-value="1" data-max-value="10" data-stroke-color="#f978a6">
         <div class="gauge-label"></div>
         <canvas width="200" height="150"></canvas>
</div>

<!-- my plus and minus buttons -->

<button type="button" class="btn btn-floating btn-danger value-control" data-action="minus" data-target="guagechanger"><i class="icon wb-minus" aria-hidden="true"></i></button>

<button type="button" class="btn btn-floating btn-danger value-control" data-action="plus" data-target="guagechanger"><i class="icon wb-plus" aria-hidden="true"></i></button>

使用加号/减号按钮更改 class "data-value"？

Change class "data-value" with plus / minus buttons?

javascript

input

attributes

gauge