Question

我写了一些JQ脚本，用于在前端添加新的显示名称选项，如wp后端。选择ID #display_name将在#nickname，#last_name或#nickname更改值时自动添加新选项。

它运作正常！

但我的代码太长了。

如何在下面缩短我的JQ脚本？

       var nickname     = jQuery('#nickname');
       var first_name   = jQuery('#first_name');
       var last_name    = jQuery('#last_name');
           nickname.change(function() {

               jQuery('#display_name').append($('<option>', { 
                                        value: nickname.val(),
                                        text : nickname.val() 
                                    }));
           });
           first_name.change(function() {

               jQuery('#display_name').append($('<option>', { 
                                        value: first_name.val(),
                                        text : first_name.val() 
                                    }));
                jQuery('#display_name').append($('<option>', { 
                                        value: last_name.val() +' '+ first_name.val(),
                                        text : last_name.val() +' '+ first_name.val()
                                    }));
                jQuery('#display_name').append($('<option>', { 
                                        value: first_name.val() +' '+ last_name.val(),
                                        text : first_name.val() +' '+ last_name.val()
                                    }));
           });
           last_name.change(function() {

               jQuery('#display_name').append($('<option>', { 
                                        value: last_name.val(),
                                        text : last_name.val() 
                                    }));
                jQuery('#display_name').append($('<option>', { 
                                        value: last_name.val() +' '+ first_name.val(),
                                        text : last_name.val() +' '+ first_name.val()
                                    }));
                jQuery('#display_name').append($('<option>', { 
                                        value: first_name.val() +' '+ last_name.val(),
                                        text : first_name.val() +' '+ last_name.val()
                                    }));
           });

Answer 1

这是您缩短的代码

$("#nickname,#first_name,#last_name").change(function () {
  $('#display_name').append($('<option>', {
    value: $(this).val(),
    text: $(this).val()
  }));
  if ($(this).attr("id") != "nickname") {
    var first_name = jQuery('#first_name');
    var last_name = jQuery('#last_name');
    $('#display_name').append($('<option>', {
        value: last_name.val() + ' ' + first_name.val(),
        text: last_name.val() + ' ' + first_name.val()
    })).append($('<option>', {
        value: first_name.val() + ' ' + last_name.val(),
        text: first_name.val() + ' ' + last_name.val()
    }));
  }
});

工作 DEMO http://jsfiddle.net/WcjLW/

Answer 2

您可以做的一种方法是缓存选择器并使用e.target作为检查条件

  var $display = jQuery('#display_name');

  $('#nickname, #first_name, #last_name').on('change', function (e) {
      var firstName = jQuery('#first_name').val(),
          lastName = jQuery('#last_name').val(),
          fullName = firstName + ' ' + lastName,
          revFullName = lastName + ' ' + firstName,
          options = [];

      options.push(this.value);

      if (e.target.id !== 'nickname') {
          options.push(revFullName, fullName);
      }
      $display.empty();
      $.each(options, function (i, val) {
          $display.append($('<option>', {
              value: val,
              text: val
          }));
      });
  });

<强> Check Fiddle

Answer 3

制作添加显示选项的功能有很大帮助：

function addDisplayOption(value, text){
    jQuery('#display_name').append($('<option>', { 
        value: value,
        text : text 
    }));
}

如果您将相同的内容捆绑在一起，则可以将代码缩短为：

var nickname     = jQuery('#nickname');
var first_name   = jQuery('#first_name');
var last_name    = jQuery('#last_name');

function addDisplayOption(value, text){
    jQuery('#display_name').append($('<option>', {
        value: value,
        text : text
    }));
}

function showDisplayOptions(){
    addDisplayOption(first_name.val(), first_name.val());
    addDisplayOption(last_name.val() +' '+ first_name.val(),last_name.val() +' '+ first_name.val())
    addDisplayOption(first_name.val() +' '+ last_name.val(),first_name.val() +' '+ last_name.val())
}


nickname.change(function() {
    addDisplayOption(nickname.val(),nickname.val())
});

first_name.change(showDisplayOptions);
last_name.change(showDisplayOptions);

如何缩短我的JQ脚本

3 个答案: