0

我编写了一些 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()
                                    }));
           });
4

3 回答 3

2

这是您的缩短代码

$("#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()
    }));
  }
});

工作演示 http://jsfiddle.net/WcjLW/

于 2013-06-21T07:51:32.677 回答
0

您可以做的一种方法是缓存您的选择器并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
          }));
      });
  });

检查小提琴

于 2013-06-21T07:33:46.713 回答
0

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

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);
于 2013-06-21T07:39:35.143 回答