Question

这一定非常简单，但我只是坚持这个...我有一个产品清单，其中包含数量的输入字段，旁边是价格列。价格显示两个值。其中一个是隐藏的。如果输入字段的值超过某个值，则应隐藏其他价格。例：（输入：[]，显示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，则执行相同操作。（所以现在取决于输入字段的总和，而不是每个单独的一个）

Answer 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();
    }
});

的 Demo with blur 的

的 Demo with keyup 的

注意

将所有jQuery代码放在$(document).ready()。
中
根据评论

的 See this update 的

的代码 的

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

的 Update after last comment 的

只需更改

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(); } });

Answer 2

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

考虑将if块包装在其中：

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

或者这样的事情，请考虑使用$.on()。

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

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

希望这有帮助。

jquery切换取决于文本框的值

2 个答案:

注意

根据评论

根据评论