如何在 jquery 中动态更改旋钮值..？答案

【问题标题】：How to change knob value dynamically in jquery..?如何在 jquery 中动态更改旋钮值..？
【发布时间】：2014-09-17 09:45:44
【问题描述】：

我已经应用了一个带有只读功能的 jquery 旋钮，如下所示：

<style>
.test{
    background: #292929;
    margin:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<body>

<input type="text" value="45%" class="dial"><button id="change">Change</button>
</body>
<script>
$(".dial").knob({
    readOnly: true,
    fgColor: "#00ABC6",
    bgColor: "#666666",
    thickness: 0.2
                });

$(document.body).on('click', 'button#change', function(){
    $("input.dial").val('80%');
    })
</script>

现在当我点击更改按钮时，它只会更改输入标签的值，但无法更改旋钮填充区域的百分比。

【问题讨论】：

标签： jquery html jquery-knob

【解决方案1】：

设置值后，只需在输入上触发更改事件，如下所示：

$("input.dial").trigger('change');

您的代码将如下所示：

<style>
.test{
    background: #292929;
    margin:50px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<body>

<input type="text" value="45%" class="dial"><button id="change">Change</button>
</body>
<script>
$(".dial").knob({
    readOnly: true,
    fgColor: "#00ABC6",
    bgColor: "#666666",
    thickness: 0.2
                });

$(document.body).on('click', 'button#change', function(){
    $("input.dial").val('80%');
    $("input.dial").trigger('change');
    })
</script>

【讨论】：

【解决方案2】：

您可以使用来自 Jquery 的 change or input trigger：

// on line to change 
$('.dial').val(27).trigger('change');

// or
$('.dial').val(27).trigger('input');

【讨论】：