Question

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

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

我的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

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

$('#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/

您也应该caching your jQuery objects而不是一遍又一遍地选择它们。

Answer 3

只需在点击功能后调用您的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() ;
});

单击按钮时响应更改触发器处理程序

3 个答案: