Question

编写此条件脚本会有更好，更清晰的方法吗？它基本上做了同样的事情，除非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;
}

Answer 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;

实际问题：

您可以根据cloneVar是否具有相关类来动态构建选择器。然后只需运行公共代码
使用带括号的括号表示法来调用insertBefore / insertAfter，具体取决于新元素的去向

其他指示：

cloneVar / cloneRow已经是jQuery对象，所以你不需要再次包装jQuery
您可能希望使用end代替parent - 它会恢复到您致电find之前的收藏集，如果您修改了自己，则无需更改DOM
您正在进行大量链接，但将更换功能移出可以清理它很多

Answer 2

您可以为更改的一部分执行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;

a？ b：c语法只是

的简写

if (a) { b }; else { c };

条件jQuery格式

2 个答案: