0

是否有更好、更简洁的方法来编写这个条件脚本？它基本上在做同样的事情，除非cloneVar有“之前”类，它会更改它正在抓取的行（第一行或最后一行）并更改.insertAfter为.insertBefore.

var cloneVar = $(this).parent().parent('.sortable');

if ($(cloneVar).hasClass('before')) {
    var cloneRow = $(cloneVar).find('.sort-group .row:first');

    $(cloneRow).clone(true).insertBefore(cloneRow)
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('input, textarea').attr('id', function(index, id) {
        return id.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('.delete').removeClass('visible');

    return false;
} else {
    var cloneRow = $(cloneVar).find('.sort-group .row:last');

    $(cloneRow).clone(true).insertAfter(cloneRow)
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', function(index, name) {
        return name.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('input, textarea').attr('id', function(index, id) {
        return id.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }).parent().find('.delete').removeClass('visible');

    return false;
}
4

2 回答 2

1 
// move this out to clean up, since you're doing the same thing in both spots
function incrementProp(index, prop) {
    return prop.replace(/(\d+)/, function (fullMatch, n) {
        return Number(n) + 1;
    });
}

var cloneRow;
if (cloneVar.hasClass('before') {
    cloneRow = $(cloneVar).find('.sort-group .row:first');
    insert = "insertBefore";
} else {
    cloneRow = $(cloneVar).find('.sort-group .row:last');
    insert = "insertAfter";
}

cloneRow.clone(true)[insert](cloneRow) // dynamically call function
    .addClass('add').removeClass('first')
    .find('input[type=text], textarea').val('')
    .attr('name', incrementProp).end()
    .find('input, textarea').attr('id', incrementProp)
    .end().find('.delete').removeClass('visible');

return false;

Actual question:

  • you can build the selector dynamically depending on whether cloneVar has the relevant class. Then just run the common code
  • Use bracket notation with a string to call insertBefore/insertAfter depending on where the new element is going

Additional pointers:

  • cloneVar/cloneRow are already jQuery objects, so you don't need to wrap in jQuery again
  • You may want to use end instead of parent - it reverts to the collection you had before calling find and you won't need to change it if you modify your DOM
  • You're doing a lot of chaining, but moving the replacement function out can clean it up a lot
于 2013-05-20T23:59:33.047 回答
0

您可以只对发生变化的部分执行 if ：

var cloneRow = $(cloneVar).find('.sort-group .row:' + 
     /* do the check here */ (cloneVar.hasClass('before') ? 'first' : 'last'));

$(cloneRow).clone(true).insertBefore(cloneRow)
.addClass('add').removeClass('first')
.find('input[type=text], textarea').val('')
.attr('name', function(index, name) {
    return name.replace(/(\d+)/, function(fullMatch, n) {
        return Number(n) + 1;
    });
}).parent().find('input, textarea').attr('id', function(index, id) {
    return id.replace(/(\d+)/, function(fullMatch, n) {
        return Number(n) + 1;
    });
}).parent().find('.delete').removeClass('visible');

return false;

一个？b : c 语法只是简写

if (a) { b }; else { c };
于 2013-05-20T23:34:43.667 回答