根据表单结果动态显示文本

Question

我有一个简单的表单，如下所示：

Team 1
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity' />

Team 2
<input type='button' value='-' class='qtyminus' field='quantity2' />
<input type='text' name='quantity2' value='0' class='qty' readonly />
<input type='button' value='+' class='qtyplus' field='quantity2' />

当其中一个团队设置为3号时，我想在下面动态显示该团队的名字。类似于＃34; Team1 / Team 2是胜利者！＆＃34;。当我更改团队名称旁边的数字时，我希望文本＆＃34; Team1 / Team2是赢家！＆＃34;消失。

Answer 1

$('.qty').on('change', function(){
  if($(this).val() == 3){
    // do this
  }
  else {
    // do the other thing
  }
})

Answer 2

假设你有某种div想要显示和隐藏这样的信息：

<div class="message" style="display:none;">Team 1 is the winner!</div>

你可以使用jQuery来定位这些按钮并听取这样的点击事件：

$('.qtyminus, .qtyplus').click(function(){...});

然后在click()回调函数中，您可以处理检查：

$('.qtyminus, .qtyplus').click(function(){
  var score = $(this).siblings(".qty");
  if($(this).hasClass("qtyplus")){
    $(score).val(parseInt($(score).val())+1);
  }
  else{
    $(score).val(parseInt($(score).val())-1);
  }

  if($(score).val()==3){
    $('.message').show();
  }
  else{
    $('.message').hide();
  }
});