javascript - 根据另一个 div 中的值显示或隐藏一个 div 的内容？

Question

如果另一个 div 中的值超过某个值，我想在一个 div 中显示一条消息。我可以解决这个问题，但是另一个 div 中的值会根据用户选择的内容而改变，然后每次发生这种情况时所需的消息都不会出现或消失。我目前正在使用:

if ($('#id1').val() < '25') {$('#id2').css('display','none');}

所以 #id2 设置为正常显示，但是当下拉选择将 #id1 中显示的值更改为小于 25 时，它需要消失，反之亦然。

有什么想法吗？谢谢。

Answer 1

是这样的吗？

$(document).ready(function() {
  $('#id1').on('change', function() {
    if (parseInt($(this).val()) >= 25) {
      $('#id2').show();
    } else {
      $('#id2').hide();
    }
  });
  // initialize div state
  $('#id1').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="id1">
  <option value=0>0</option>
  <option value=10>10</option>
  <option value=25>25</option>
  <option value=50>50</option>
  <option value=100>100</option>
</select>
<br/>
<br/>
<div id="id2">This should show when greater than or equal to 25</div>