jquery切换取决于文本框的值

jquery toggle depending on value of textbox

本文关键字：文本 取决于 jquery      更新时间：2023-09-26

这一定很简单，但我只是被这个卡住了。。。我有一个产品列表，上面有一个数量输入字段，旁边有一列价格。价格显示两个值。其中一个是隐藏的。如果输入字段的值超过某个值，则应隐藏其他价格。示例：（输入：[]，显示价格1价格2）

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

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

我的另一个问题是……如果所有输入字段的和（以类1为类）都大于5，我该怎么做呢。（因此，现在取决于输入字段的总和，而不是每个单独的字段）

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

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

考虑将你的if块包装成这样：

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

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

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

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

希望这能有所帮助。

相关文章：