0

这一定很简单，但我只是被这个困住了......我有一个产品列表，其中有一个数量输入字段，旁边是一个价格列。价格显示两个值。其中之一是隐藏的。如果输入字段的值超过某个值，它应该隐藏另一个价格。示例：（输入：[]，显示 price1price2）

input: [2], show <span class=one>price1</span>
input: [5], show <span class=one>price1</span>
input: [8], show <span class=two>price2</span>
input: [9], show <span class=two>price2</span>

到目前为止我的代码（例如，因为我只展示了 2 个产品）：

<form name="formname" action="formaction" method="post">
prod 1<input type="text" value="" class="class1" size="3"><span class="one">$1.00</span><span class="two">$2.00</span>
prod 2<input type="text" value="" class="class1" size="3"><span class="one">$4.00</span><span class="two">$6.00</span>
</form>

在脚本标签的底部：

$(document).ready(function() {
    if($('input.class1').val() > 5) {
       $('.one').show();
       $('.two').hide();
    }
});

我错过了什么？也许是表格名称？这只是第一部分...

我的另一个问题是.. 如果所有输入字段（以 class1 作为类）的总和超过 5，我该如何做到这一点，也可以这样做。（所以现在取决于输入字段的总和，而不是每个单独的字段）

4

2 回答 2

1 
var inputs = $('input[class^=class]');  // get inputs which class name 
                                        // start with "class" eg: class1, class2..

// fire blur event
// you may use keyup or something else

inputs.on('blur', function(e) {
    var val = 0;

    // adding all inputs value
    // of all inputs with class = blured input class

    $('input.' + this.className).each(function() {
      val += parseInt( this.value, 10);        
    });

    // checking for condition
    if (val > 5) {
       $(this).next('.one').show().next('.two').hide();
    } else {
       $(this).next('.one').hide().next('.two').show();
    }
});

带模糊的演示

带键盘的演示

笔记

将所有 jQuery 代码放在$(document).ready().

根据评论

看到这个更新

代码

if (val > 5) {
   $('.one').show();
   $('.two').hide();
} else {
   $('.one').hide();
   $('.two').show();
}

最后评论后更新

只是改变

val += parseInt( this.value, 10);

到

val += parseInt( this.value || 0, 10); // default 0, if no value given

根据评论

如何为选择框实现上述代码？ 

var selects = $('select[class^=class]');  // get selects which class name
                            // start with "class" eg: class1, class2..

// fire change event

selects.on('change', function(e) {
    var val = 0;

    // adding all selects value

    $('select.' + this.className).each(function() {
      val += parseInt( this.value, 10);        
    });

    // checking for condition
    if (val > 5) {
       $(this).next('.one').show().next('.two').hide();
    } else {
       $(this).next('.one').hide().next('.two').show();
    }
});
于 2012-09-11T18:23:00.807 回答
0

您在页面加载时调用它，每次更改输入字段的值时都需要运行它。

考虑将您的 if 块包装在此：

$('input.class1').blur(function() {
  if($('input.class1').val() > 5) {
     $('.one').show();
     $('.two').hide();
  }
});

或者类似的东西，考虑使用$.on().

如果要对它们求和，请为每个输入分配一个公共类，然后使用$.each()：

$('.common-class').each(function() {
  sum = sum + $(this).val()
});

希望这可以帮助。

于 2012-09-11T18:06:19.793 回答