jquery - 在按钮单击时响应更改触发处理程序

Question

JSFiddle

在以下示例中，如果您手动更改文本框中的文本，您会在文本框下方看到不同的消息。

如果您单击其中一个按钮（即，如果您单击按钮设置为 4），我想要相同的行为，您应该会看到 Mid-to-Mod 脆弱出现在文本输入下方。

我的 HTML

<input type="text" id="total-frailty-score" value="9" />

<div id="frail-category-area">
    <div id="frail-category"></div>
</div>

<input type="button" id="a" value="Set as 4" />
<input type="button" id="b" value="Set as 2" />
<input type="button" id="c" value="Set as 7" />

JavaScript/JQuery

$(function () {

function FrailCategory() {

    if ($('#total-frailty-score').val() ==  9) {
        $('#frail-category').text('Terminally')
    } else if ($('#total-frailty-score').val() >=  1 && $('#total-frailty-score').val() <=  3) {
        $('#frail-category').text('Pre-Frail')
    } else if ($('#total-frailty-score').val() >=  4 && $('#total-frailty-score').val() <=  6) {
        $('#frail-category').text('Mid-to-Mod frail')
    } else if ($('#total-frailty-score').val() >=  7 && $('#total-frailty-score').val() <=  8) {
        $('#frail-category').text('Severely frail')
    }
}

    $('#total-frailty-score').change(FrailCategory).triggerHandler("change");

});

$('#a').click(function() {
    $('#total-frailty-score').val('4');
});

$('#b').click(function() {
    $('#total-frailty-score').val('2');
});

$('#c').click(function() {
    $('#total-frailty-score').val('7');
});

Answer 1

您可以在单击处理程序中手动触发更改事件：

$('#a').click(function() {
    $('#total-frailty-score').val('4').change();
});

虽然我建议重写所有内容：JSFiddle

Answer 2

只需在您的点击功能后调用您的 FrailCategory()。

jsfiddle

$('#a').click(function() {
    $('#total-frailty-score').val('4');
    FrailCategory() ;
});

$('#b').click(function() {
    $('#total-frailty-score').val('2');
    FrailCategory() ;
});

$('#c').click(function() {
    $('#total-frailty-score').val('7');
    FrailCategory() ;
});

Answer 3

只需从单击处理程序调用绑定到您的更改处理程序的相同函数：

$('#a').click(function() {
    scoreBox.val('4');
    setFrailText();
});

$('#b').click(function() {
    scoreBox.val('2');
    setFrailText();
});

$('#c').click(function() {
    scoreBox.val('7');
    setFrailText();
});

http://jsfiddle.net/AS6GB/38/

您还应该缓存您的 jQuery 对象，而不是一遍又一遍地选择它们。