Question

我的项目有多个列表，例如人员，工作，排名。对于每个列表，我有单独的jQuery代码，看起来像这样：

$('dl.person li.delete').live("click", function() {
  var personDL = $(this).closest('dl');

  if (confirm("Really delete person '" + personDL.find('dt').text() + "' ?")) {
    $.ajax({
      type: "POST",
      url: "/people/do-delete",
      data: "person=" + personDL.attr('id'),
      dataType: "json",
      timeout: 8000,
      success: function(data) {
        personDL.fadeOut("slow", function() {
          personDL.remove();
          var t = (data.total != 1) ? ' person' : ' persons';
          $('h3 span#people').text(data.total + t);
        });
      }
    });
  }

  return false;
});

正如您所看到的，要为每个列表使用一个函数是非常困难的，因为“person”的每个实例都需要替换为“job”或“rank”。

我应该尝试使用单一功能（并且有一种简单的方法吗？）或者我应该保留原样吗？

Answer 1

如果HTML和URL结构在人/作业/等级/等方面足够相似，您可以编写一个非常简单的通用函数。像这样：

function initDeletes() {

    var plurals = {
        person: 'people',
        job: 'jobs',
        rank: 'ranks'
    };

    $.each(['person', 'job', 'rank'], function (index, elt) {
        $('dl.' + elt + ' li.delete').live('click', function() {
            var $DL = $(this).closest('dl');
            var elts = plurals[elt];
            if (confirm("Really delete " + elt + " '" + $DL.find('dt').text() + "' ?")) {
                $.ajax({
                    type: 'POST',
                    url: '/' + elts + '/do-delete',
                    data: elt + '=' + $DL.attr('id'),
                    dataType: 'json',
                    timeout: 8000,
                    success: function(data) {
                        $DL.fadeOut('slow', function() {
                            $DL.remove();
                            var t = ' ' + (data.total === 1 ? elt : elts);

                            // no need for a more-specific selector
                            // adding anything beyond an ID is overspecifying
                            $('#' + elts).text(data.total + t);
                        });
                    }
                });
            }

            return false;
        });
    });
}

jQuery删除：通用或单独的功能？

1 个答案: