我有以下表格:
<form method="post" action="options.php" id="pay_what_you_want_form">
<input type="radio" name="payment_period" value="monthly" id="monthly" checked><label for="monthly" class="payment_period_label">Monthly</label><br>
<input type="radio" name="payment_period" value="quarterly" id="quarterly"><label for="quarterly" class="payment_period_label">Quarterly</label><br>
<input type="radio" name="payment_period" value="yearly" id="yearly"><label for="yearly" class="payment_period_label">Yearly</label><br>
<input type="hidden" id="payment_amount" name="payment_amount" value="<?php echo esc_attr( get_option('payment_amount') ); ?>">
<div id="slider"></div>
<?php submit_button('Update'); ?>
</form>
这是3个单选按钮,用户可以在其中选择付款期限(每月,每季度或每年)。然后是一个滑块(使用jquery ui滑块),用户可以在其中选择要支付的金额。
我的滑块代码如下:
<script>
jQuery(function($) {
var initialValue = 7.5;
var sliderTooltip = function(event, ui) {
var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start)
var tooltip = '<div class="tooltip"><div class="tooltip-inner">£' + curValue + '</div><div class="tooltip-arrow"></div></div>';
$('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
$("#payment_amount").val(ui.value); //change amount in hidden input field
}
var maxValue = 25;
var stepValue = 0.1;
$("#slider").slider({
value: initialValue,
min: 0,
max: maxValue,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
$("#payment_amount").val($("#slider").slider("value"));
});
</script>
我想要发生的是以下情况,当用户检查另一个单选按钮时,我会更改maxValue和stepValue。例如: 每月:maxValue = 25,stepValue = 0.1 季度:maxValue = 65,stepValue = 0.5 每年:maxValue = 220,stepValue = 1
我对如何做到这一点有点困惑 - 有没有办法通过AJAX这样做,所以当用户更改付款期限时,我可以将“更新”类添加到表单中并稍微淡化它而价值更新。
任何帮助对此都有用,因为我对此有点迷失。
更新代码:
var newMax = 25;
$('input[name="payment_period"]').change(function() {
if($('input[name="payment_period]').val('monthly')) {
var newMax = 25; //eg
} else if($('input[name="payment_period]').val('quartely')) {
var newMax = 65;
} else if($('input[name="payment_period]').val('yearly')) {
var newMax = 250;
}
// update the options on the slider
$('#slider').slider('option', {max: newMax});
});
$("#slider").slider({
value: initialValue,
min: 0,
max: newMax,
step: stepValue,
create: sliderTooltip,
slide: sliderTooltip,
});
答案 0 :(得分:1)
您不需要ajax - 您拥有在客户端工作所需的一切。您只需在滑块UI上调整一些选项即可。这是一个部分完成的片段,可以帮助您:
// bind a handler to the radio buttons
$('input[name="payment_period"]').change(function() {
// determine which value was pressed, etc...
var newmax = 50; //eg
var newmin = 10; //eg
// update the options on the slider
$('#slider').slider('option', {max: newmax, min: newmin});
});