val（）更改時的JS觸發事件

Question

問：從onkey事件更改val時如何觸發事件？

問題：更改一個輸入時，其他輸入將更改值，但不更改CSS。

JsFiddle： http : //jsfiddle.net/6Qnbh/

$('.stat').val(0);

$(".stat").change(function () {
    var val = $(this).val();
    if (val > 0) {
        $(this).css("border", "1px solid #0f0");
    } else if (val < 0) {
        $(this).css("border", "1px solid #f00");
    } else {
        $(this).css("border", "1px solid #000");
    }

}).trigger("change");

/**/

$('.stat').keyup(function () {
    var val = $(this).val();
    if (val > 0) {
        var num = Math.abs(val) * -1;
    } else {
        var num = Math.abs(val) * 1;
    }
    $('input[data-id=' + $(this).attr("data-link") + ']').val(num);
});

Answer 1

在這條線上

    $('input[data-id=' + $(this).attr("data-link") + ']').val(num);

添加.trigger("change"); 確保change事件被觸發：

    $('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger("change");

小提琴：

http://jsfiddle.net/6Qnbh/4/

Answer 2

設置值后，需要觸發更改事件。 查看更新的小提琴

$(function () {
        $('.stat').val(0);

    $(".stat").change(function () {
        var val = $(this).val();
        if (val > 0) {
            $(this).css("border", "1px solid #0f0");
        } else if (val < 0) {
            $(this).css("border", "1px solid #f00");
        } else {
            $(this).css("border", "1px solid #000");
        }

    }).trigger("change");

    /**/

    $('.stat').keyup(function () {
        var val = $(this).val();
        if (val > 0) {
            var num = Math.abs(val) * -1;
        } else {
            var num = Math.abs(val) * 1;
        }

        // I have added the .trigger('change') part here
        $('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger('change');
    });
});

Answer 3

在您的代碼中，$（this）指向當前更改的jQuery對象。 一個簡單的解決方案是：

$(".stat").change(function () {
    var val = $(this).val();
    if (val > 0) {
        $('.stat').css("border", "1px solid #0f0");
    } else if (val < 0) {
        $('.stat').css("border", "1px solid #f00");
    } else {
        $('.stat').css("border", "1px solid #000");
    }

編輯：根據您想要發生什么，@ Anton可能會產生您想要的效果； 我不確定你需要什么。
至於其他輸入框未更改的原因，說明仍然相同。

Answer 4

function test(){
    $(".stat").each(function () {
        var val = $(this).val();
        if (val > 0) {
            $(this).css("border", "1px solid #0f0");
        } else if (val < 0) {
            $(this).css("border", "1px solid #f00");
        } else {
            $(this).css("border", "1px solid #000");
        }

    })
 }

並在keyup上調用該函數

DEMO