如果span包含文本，則更改div CSS

Question

我有一個輸入和跨度。 當我輸入時，輸入值將傳遞給span。 現在，我想隱藏其他div / button或如果我的跨度具有特定值的東西。 我的代碼不起作用。 怎么了？

 $('#input').on('keyup', function(){ $('#status').html($(this).val()); }); $('#status').on('change', function(){ var status = $('#status').html(); if (status == "OK") { $('#test').css("background", "red"); } else { $('#test').css("background", "blue"); } }); 

 #test { width: 50px; height: 50px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <span id="status"></span> <div id="test"></div> 

Answer 1

與其檢查span元素上的更改，不如在輸入事件偵聽器內執行此邏輯。 像這樣：

$('#input').on('keyup', function(){
    var val = this.value;

    $('#status').html(val);

    if (val == "OK") {
        $('#test').css("background", "red");
    } else {
        $('#test').css("background", "blue");
    }
});

Answer 2

列出keyup事件並更改背景

 $('#input').on('keyup', function(){ $('#status').html($(this).val()); console.log($(this).val()); if ($('#status').html() == "OK") { $('#test').css("background", "red"); } else { $('#test').css("background", "blue"); } }); 

 #test { width: 50px; height: 50px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="input"> <span id="status"></span> <div id="test-container"> <div id="test"></div> </div>