Question

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

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

因此＃id2设置为正常显示，但当下拉选项将＃id1内显示的值更改为小于25时，它需要消失，反之亦然。

有什么想法吗？感谢。

Answer 1

你需要：

#id1
将选定的value转换为整数
将此与整数25
使用toggle()根据条件显示/隐藏div
在页面加载时触发change事件

代码：

$('#id1').on('change', function() {
    $('#id2').toggle(parseInt($(this).val().match(/\d+/)[0], 10) >= 25);
}).trigger('change');

＆＃13;

$('#id1').on('change', function() {
  $('#id2').toggle(parseInt($(this).val().match(/\d+/)[0], 10) >= 25);
}).trigger('change');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/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>

＆＃13;

Answer 2

这样的事情？

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

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

2 个答案: