如果为真，则显示字段，如果为假，则隐藏字段？

Question

如果字段A中的金额高于字段B中的金额，希望显示一个通知框。

目前有一些代码可以工作，但是通知框的开关并不取决于实际金额。

我错过了什么？

JQuery：

 $(document).ready(function() {
     $('#fieldA').change(function(){
                if($(this).val()>$('#fieldb').val()){
                  //display it on the form
                  $('.labelNotification').toggle();
                  $('.labelNotification').append('Not recommended to have <em>FieldA</em> figure higher than <em>FieldB.</em>');
                }
            })
      });

HTML：

<p style="display: none;" class="error labelNotification">

这是一个HTML标签，它的样式为“display:none;”，意味着该标签在页面中不可见。此外，它还有一个class属性为“error labelNotification”。

- Alex

---

我怀疑你检查大于的 if 块没有正常工作，请打印值并查看。 - kobe

你可能同样缺少一些代码，以便在条件不满足时删除你正在添加的文本（即FieldA < FieldB，但之前不是这样）... 在任何情况下，尝试警告一下 $(this).val() 和 $('#fieldb').val()，就像gov建议的那样... 你还可以尝试使用parseInt($(this).val())，同样适用于FieldB。 - Zathrus Writer

Answer 1

这是专门为toggle(boolean)方法量身定制的。此外，您需要注意追加到通知标签上...如果用户两次更改答案怎么办？最好有多个通知对象，每个对象可以包含单个类型的通知内容。

$(function() {
    $('#fieldA').change(function() {
        var isLarger = +$(this).val() > +$('#fieldB').val();  // Note: convert to number with '+'
        var $labelNotification = $('.labelNotification');
        $labelNotification.toggle(isLarger);
        if (isLarger) {
            //display it on the form
            $labelNotification.html('Not recommended to have FieldA figure higher than FieldB.');
        }
    })
});

- Anthony Mills

Answer 2

如果你正在比较数字值（看起来是这样），你应该使用 parseInt 或 parseFloat 将由 val() 返回的（字符串）值转换为整数。根据 val 的文档, 该函数始终返回一个字符串值。

- Andrew Whitaker

---

如果它们是字符串，> 比较运算符会为您转换它们。示例：http://jsfiddle.net/SL4XA/ - user113716

@patrick dw 我认为那不正确。在FF中，“10”>“2”的结果为false。两个字符串被比较，没有隐式转换。http://jsfiddle.net/W46yq/ - Andrew Whitaker

@ Andrew，大于号不是问题，正如 Patrick 所说，它会自动处理。 - kobe

var a="30"; var b="20";alert(a>b); 火狐浏览器返回true。 - kobe

@gov 这个能够正常工作是因为在字母表中 "2" 比 "3" 靠前。尝试一下 "3" > "20"。这是预期的行为，因为变量被视为字符串进行比较。 - Andrew Whitaker

Answer 3

我找到了问题，

首先，你需要像下面这样正确地使用分号。

    $('#fieldA').change(function () {
            if ($(this).val() > $('#fieldB').val()) {
                alert("its greater");
                //display it on the form
$('.labelNotification').append('Not recommended to have FieldA figure higher than FieldB.');
 $('.labelNotification').show();               
            }
else {$('.labelNotification').hide();
$('.labelNotification').html('');}
        });

第二件事，当您切换它时，它不会第二次显示

如果40>30

再次，如果您输入50并且50>30，则不会显示

这是第二个问题

最后一个问题是始终清空标签

$('.labelNotification').html('')'

- kobe

---

@alex，toggle 根据其状态开/关，因此如果您不断地给 a > b，它将无法工作。 - kobe

我应该使用什么代替TOGGLE？ - Alex

@alex 只需使用 .show() 或 .hide()，在 if 块内使用 .show()，否则块中如果它们不相等，则使用 .hide()。 - kobe

Answer 4

Toggle并不是您情况下的最佳选择。

您需要进行比较，然后再决定。

由于您正在查看数字，我强烈建议使用数字类型来进行比较，可以使用parseInt()或parseFloat()。

通知标签中的文本只需要设置一次，因为当B>A时没有任何注释显示它显示什么。建议在HTML中设置此选项。

<span class="labelNotification" style="display:none">Your Warning Text</span>
<!-- if your CSS class has `display:none` remove the style attribute -->

关于jQuery。

$(function() {
    $("#fieldA").change(function() {
       var a = parseInt($(this).val());
       var b = parseInt($("#fieldb").val());
       // handle if a or b is not a number -->  isNaN(a) || isNaN(b)

      if( a > b ) {
        $('.labelNotification').show()
      } else {
        $('.labelNotification').hide()
      }    
    });
});

- Bobby Borszich

---

嗨Bobby，我正在使用完全相同的代码，但不知何故，无论值是低于还是高于fieldA，通知消息都会出现 - 你有什么想法吗？再次感谢！ - Alex

嗨，亚历克斯，http://mymx.biz/SO/label-notification.htm已经运作正常。请记住，您需要使用小写字母b的#fieldb和大写字母A的#fieldA。另外，我建议您像我在评论中所示的那样，在两个框上都进行更改的连接。 - Bobby Borszich