更改按钮点击时的输入值

时间:2019-09-15 12:46:11

标签: jquery

我正在尝试检查输入数字字段是否具有特定值,如果是,请将其更改为另一个值。这是我的代码:

<html>
    <div id="container">
        <input class="column10" type="number" value="0">
        <button class="calculate-button">Calculate</button>
    </div>
</html>

<script>
jQuery('calculate-button').on('click', '.column10', function(){
  if(this.value == 9)
  {
    this.value=1.5;
    jQuery(this).change();
  }
});
</script>

https://jsfiddle.net/gatw902b/

但是我无法使其正常工作。有人可以帮我吗? 谢谢!

5 个答案:

答案 0 :(得分:0)

您必须使用.运算符将类选择器用作$('.calculate-button'),而另一个错误是使用this。按钮更改功能中的this将检查按钮值,而不是文本框值。为此,您必须将选择器的值设为$('.column10').val()

$('.calculate-button').on('click',function(){
$(".column10").each(function(){
        if($(this).val()==9){
            $(this).val(1.5);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <div id="container">
        <input class="column10" type="number" value="0">
        <input class="column10" type="number" value="0">
        <input class="column10" type="number" value="0">
        
        <button class="calculate-button">Calculate</button>
    </div>
</html>

答案 1 :(得分:0)

您的代码中存在各种问题。

jQuery('calculate-button').on('click', '.column10', function(){

首先,您没有使用正确的选择器,它应该是“ .calculate-button”。

然后您在按钮上使用了“ .on”事件,但是选中了不是该按钮的子项的“ .column10”,因此它将永远不会触发。

这是一个正确的代码:

jQuery('body').on('click', '.calculate-button', function(){
  var oInput = jQuery('#container input[type=number]');
  if( jQuery(oInput).val() == 9 )
  {
    jQuery(oInput).val(1.5)
  }
});

答案 2 :(得分:0)

在这里,我对您的代码进行了一些更改。希望对您有帮助。

<!DOCTYPE html>
<html>
    <body>
        <div id="container">
            <input class="column10" type="number">
            <button class="calculate-button">Calculate</button>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            jQuery('.calculate-button').on('click', function(){
                var inputVal = jQuery('.column10');
                if (inputVal.val() == 10) {
                    inputVal.val(20);
                }
            });
        </script>
    </body>
</html>

答案 3 :(得分:0)

第一个问题是您错过了。运算符

    $('.calculate-button').on('click',function(){
    $(".column10").each(function(){
        if($(this).val() === 9){
            $(this).val(1.5);
        }
    });
});

答案 4 :(得分:0)

您的代码未选择要单击的按钮,而是使用jquery .val()代替.value

jQuery('body').on('click', '.calculate-button', function(){
   console.log('res cat');
   if($('.column10').val() == 9){
      $('.column10').val(1.5);
      jQuery($('.column10')).change();
    }

});