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;

実際の質問:

  • cloneVar に関連するクラスがあるかどうかに応じて、セレクターを動的に構築できます。次に、共通コードを実行するだけです
  • 文字列でブラケット表記を使用して、新しい要素の移動先に応じて insertBefore/insertAfter を呼び出します

追加のポインタ:

  • cloneVar/cloneRowはすでに jQuery オブジェクトであるため、jQuery で再度ラップする必要はありません
  • end代わりに使用したい場合がありparentます-呼び出す前に持っていたコレクションに戻りfind、DOMを変更しても変更する必要はありません
  • 多くの連鎖を行っていますが、置換関数を移動すると、多くのことがクリーンアップされます
于 2013-05-20T23:59:33.047 に答える
0

変更する 1 つの部分に対して 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 に答える