Question

我有一个输入和跨度。当我键入输入值传递给span时。现在我想隐藏其他div /按钮或者其他东西，如果我的跨度具有特定值。我的代码不起作用。怎么了？

＆＃13;

$('#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");
        }
    });

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如果span包含文本，则更改div css

2 个答案: