用jQuery和javaScript从按钮中填充许多输入字段

我有4个输入字段。当我专注于此输入字段时，我尝试将每个输入字段带有许多按钮的值，但是每次所有输入都会自动填写。我该如何解决此问题？谢谢

//input field
$("input.valu1").click(function () {
    $(this).focus();
    var $thise1 = $('input.valu1');
    $(".zahlen td button").click(function () {
        $thise1.val($thise1.val() + $.trim($(this).text()));

    });

});
$("input.valu2").click(function () {
    $(this).focus();
    var $thise2 = $('input.valu2');
    $(".zahlen td button").click(function () {
        $thise2.val($thise2.val() + $.trim($(this).text()));


    });
});

  $("input.valu3").click(function () {
    $(this).focus();
    var $thise3 = $('input.valu3');
    $(".zahlen td button").click(function () {
        $thise3.val($thise3.val() + $.trim($(this).text()));


    });
});

$（" input.valu4"）。单击（function（）{ $（this）.focus（）;

    var $thise4 = $('input.valu4');
    $(".zahlen td button").click(function () {
        $thise4.val($thise4.val() + $.trim($(this).text()));


    });
});

我的代码在这里

您的代码对于其目的而言太复杂了。您的代码会增长，更多的是将新组件添加到您的应用程序中。您需要 cristise 代码的某些部分。

无论如何，这是您可以解决问题的方法。您可能需要使用代码调整它。

$(function () {
    var inputFocus = null;
    $('input').click(function(){
      inputFocus = $(this);
    });
    
    $('button').on('click', function() {
      if (inputFocus != null) {
        var valueButton = $(this).html();
        var valueInput = $(inputFocus).val();
        $(inputFocus).val(valueInput + valueButton);
        $('.error').html('');
      } else {
        $('.error').html("Error: you need to select an input first");
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="row">
        <div class="col-lg-12">
            <p class="add">Addition</p>
            <table>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>93</td>
                    <td>=</td>
                    <td><input type="number" name="valu" class="valu1"></td>
                    <!-- the last for the glyphicon -->
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>13</td>
                    <td>=</td>
                    <td><input type="number" name="valu" class="valu2"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>3</td>
                    <td>=</td>
                    <td><input type="number" name="valu" class="valu3"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>30</td>
                    <td>=</td>
                    <td><input type="number" name="valu" class="valu4"></td>
                    <td></td>
                </tr>
                <tr>
                </tr>
            </table>
        </div>
    </div>
  
    <table class="zahlen" style="margin:0 auto;">
        <tr>
            <td><button>0</button></td>
            <td><button>1</button></td>
            <td><button>2</button></td>
            <td><button>3</button></td>
            <td><button>4</button></td>
        </tr>
        <tr>
            <td><button>5</button></td>
            <td><button>6</button></td>
            <td><button>7</button></td>
            <td><button>8</button></td>
            <td><button>9</button></td>
        </tr>
    </table>
  <p class="error" style="color: red"></p>
</body>

相关内容

最新更新

热门标签：