使用加号/减号按钮更改 class "data-value"?
Change class "data-value" with plus / minus buttons?
所以所有教程都展示了如何使用加号和减号按钮更改简单输入 "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>
根据 jquery .data() :
var target = $(this).data('target');
更改数据属性:
$(this).data('target', value);
你们真的很亲密,
只是不用去 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>
所以所有教程都展示了如何使用加号和减号按钮更改简单输入 "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>
根据 jquery .data() :
var target = $(this).data('target');
更改数据属性:
$(this).data('target', value);
你们真的很亲密,
只是不用去 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>