使用 .on(） 高效镜像值

efficient mirroring of values with .on()

本文关键字：镜像 高效 on 使用      更新时间：2023-09-26

我有两个表。我想将值从一个表镜像到另一个表。我目前的实现是这样的：

   <script type="text/javascript">  
        $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){        
            $("input[type='text']#copytextfield1").val( $("[type='text']#textfield1").val() );
            $("input[type='text']#copytextfield2").val( $("[type='text']#textfield2").val() );
            $("input[type='text']#copytextfield3").val( $("[type='text']#textfield3").val() );
            $("input[type='text']#copytextfield4").val( $("select#select1").val() );        
        });         
    </script>

如您所见，名称非常相似。 唯一的区别是镜像元素具有"副本"。 您能建议一下提高效率的方法吗？ 也许利用命名对流？

可以这样做：

   <script type="text/javascript">  
        $("#textfield1, #textfield2, #textfield3, #select1").on("keyup keypress blur click change", function(event){
            for (var i = 1; i <= 3; i++) {
                $("#copytextfield" + i).val( $("#textfield" + i).val() );
            }
            $("input[type='text']#copytextfield4").val( $("select#select1").val() );        
        });         
    </script>

但是，选择的 ID 会导致一些麻烦，因此如果您将所有字段的 id 更改为类似 input1 - input4 的内容，则可以对其进行更多重构。

    <script type="text/javascript"> 
        $("#input1, #input2, #input3, #input1").on("keyup keypress blur click change", function(event){
            for (var i = 1; i <= 4; i++) {
                $("#copytextfield" + i).val( $("#input" + i).val() );
            }       
        });         
    </script>

请尝试以下操作： 也为您制作了一个演示： http://jsfiddle.net/6hwLS/4/

想法是从末尾取出数值并将它们与$(this)对象一起使用：

此外，您不需要input[type='text']或select因为id是唯一的并且唯一地标识 DOM 元素。

希望这有帮助，:)

喜欢这个： 

$("#textfield1, #textfield2, #textfield3, #select1")
    .on("keyup keypress blur click change", function(event) {
        var theNum = parseInt($(this).attr("id").match(/'d+$/)); // will return last numeric value
         $("#copytextfield"+theNum).val($("#textfield"+theNum).val());      
         if( theNum === 4) {
            $("#copytextfield"+theNum).val($("#select1").val());
        }
}); ​
相关文章：