Question

我想在更改#town和#animal值时，输入背景将为红色。我的代码是更改输入背景，当我更改一个输入时，但我想，如果我更改了两个输入，代码后将更改背景颜色。

我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $('#town, #animal').on('change', function() {
            $('input').css('background', 'red');
        });
    });
    </script>
</head>
<body>

<input type="text" id="town">
<input type="text" id="animal">

</body>
</html>

Answer 1

您可以尝试此Working Fiddle

$('#town, #animal').on('change', function() {
    if($.trim($('#town').val())!='' && $.trim($('#animal').val())!=''){
        $('input').css('background', 'red');
    }
});

Answer 2

如果你想要它，以便你想等到两个输入都改变了，那就非常简单了！：）

简单地说，有两个变量：

var townChanged = false;
var animalChanged = false;

然后，执行两个jQuery函数：

$('#town').on('change', function() {
    townChanged = true;
    if (animalChanged) {
        $('input').css('background', 'red');
    }
});

$('#animal').on('change', function() {
    animalChanged = true;
    if (townChanged) {
        $('input').css('background', 'red');
    }
});

显然你会想要清理一下，但我希望这对你来说是一个好的开始

jQuery更改方法的多个元素

2 个答案: