Question

我有一个有效的jQuery解决方案，可以根据表格中的挪威4位数邮政编码插入城市。但是这种形式有两组地址，我不知道如何复制，重命名或合并jQuery函数。

<form>
<!--address1-->
  <input type="text" name="ZIPCODE" id="USER.ZIPCODE" size="4" maxlength="8" />
  <input type="text" name="CITY" id="USER.CITY" size="30" maxlength="100" value="test" />
<!--address2-->
  <input type="text" name="ZIPCODE2" id="USER.ZIPCODE2" size="4" maxlength="8" />
  <input type="text" name="CITY2" id="USER.CITY2" size="30" maxlength="100" value="test" />

<script type="text/javascript">
  $(function(){
    $inputField = $("#USER\\.ZIPCODE");
            $outputField = $("#USER\\.CITY");
            $inputField.keyup(function(){
            if($inputField.val().match(/\d{4}/)) {
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$inputField.val()+"&callback=?",
            function(data){
                $outputField.val( data["postal_codes"][0]["city"] );
                $("#USER\\.CITY").attr('readonly','readonly');
                });
            } else {
                $outputField.val("?");
            }
    });
  });

  $(function(){
    $inputField = $("#USER\\.ZIPCODE2");
            $outputField = $("#USER\\.CITY2");
            $inputField.keyup(function(){
            if($inputField.val().match(/\d{4}/)) {
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$inputField.val()+"&callback=?",
            function(data){
                $outputField.val( data["postal_codes"][0]["city"] );
                $("#USER\\.CITY2").attr('readonly','readonly');
                });
            } else {
                $outputField.val("?");
            }
    });
  });
</script>
</form>

我在这里看了很多关于合并jQuery函数和func1 func2方法的帖子，而没有对此进行操作。我想它也可以与某种if语句合并。工作示例单个地址： http://jsfiddle.net/Rx4jZ/ （attr和prop都可能有效）

Answer 1

Heisann，

我为你做了一个小提琴：http://jsfiddle.net/Olavxxx/Mu66h/

HTML

<form>
<!--address1-->
  <input type="text" class="postNummer" data-target="postSted" name="ZIPCODE" id="USER.ZIPCODE" size="4" maxlength="8" />
  <input type="text" class="postSted" name="CITY" id="USER.CITY" size="30" maxlength="100" value="test" />
<!--address2-->
  <input type="text" class="postNummer" data-target="postSted2"  name="ZIPCODE2" id="USER.ZIPCODE2" size="4" maxlength="8" />
  <input type="text" class="postSted2" name="CITY2" id="USER.CITY2" size="30" maxlength="100" value="test" />
</form>

JQuery的

$( ".postNummer" ).change(function() {
            // first get the custom attribute data-target
            var theTarget = $( this ).attr("data-target");

            // empty the target
            $("input[class="+ theTarget +"]").val("");

            //If value over 4 in length and number
            if($( this ).val().match(/\d{4}/)) {

            // get data
            $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$( this ).val()+"&callback=?",
            function(data){
                 $("input[class="+ theTarget +"]").val( data["postal_codes"][0]["city"] ); // insert data
                 $("input[class="+ theTarget +"]").attr('readonly','readonly');    // make readonly
                });
            } else {
                $("input[class="+ theTarget +"]").val("?");
                $(this).effect( "shake" );
            }

  });

顺便说一下。逻辑从$（this）（触发代码的输入）中提取data-target属性。我还添加了用于触发事件的类。

Answer 2

您应该创建一个函数并将参数传递给它：

$(function(){
    function getCity(inputParam, outputParam){
        var inputField = $("#"+inputParam);
        var outputField = $("#"+outputParam);

        $(inputField).keyup(function(){
            if($(inputField).val().match(/\d{4}/)) {
                $.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code="+$(inputField).val()+"&callback=?",
                    function(data){
                        $(outputField).val( data["postal_codes"][0]["city"] );
                        $(outputField).attr('readonly','readonly');
                    });
            } else {
                $(outputField).val("?");
            }
        });
    }

    getCity('ZIPCODE1', 'CITY1'); 
    getCity('ZIPCODE2', 'CITY2');
});

如果您想添加更多ZipCodes和Citys，您只需添加：

  getCity('newZipCode', 'newCity');

工作JsFiddle：http://jsfiddle.net/Rx4jZ/2/

我真的不知道普通版本出了什么问题。如果你检查我没有太大变化。

合并两个jquery函数

2 个答案: