如何簡化或乾燥這個jQuery代碼的語法

我在一大堆單選按鈕組上做同樣的選擇。唯一改變的是name。如何簡化或乾燥這個jQuery代碼的語法

var fcolor = $(this).closest('.branch').find('input[name="fcolor"]:checked').val(); 
var bcolor = $(this).closest('.branch').find('input[name="bcolor"]:checked').val(); 
var sidec = $(this).closest('.branch').find('input[name="sidec"]:checked').val(); 
var linec = $(this).closest('.branch').find('input[name="linec"]:checked').val();

如何簡化此代碼，以免重複這樣的代碼？

來源

2011-02-23 twitter

如果您對所有具有name屬性的輸入感興趣，我會將它們全部選中，創建屬性和值的對象。

如果你需要挑出某些特定的東西，給他們一個普通的類，然後選擇它們。

var props = {}; 

$(this).closest('.branch').find('input[name]:checked').each(function() { 
    props[ this.name ] = this.value; 
});

最終你會用這樣的結構：

props = { 
    fcolor: "some value", 
    bcolor: "some value", 
    sidec: "some value", 
    linec: "some value" 
};

...訪問爲：

props.fcolor; // "some value"

來源

2011-02-23 17:45:08 user113716

創建一個函數。從我所看到的情況來看，除了輸入名稱以外，所有內容都是一樣在通過名稱和構建你的字符串....

像

function myOperation(name) { 
    return $(this).closest('.branch').find('input[name="' + name + '"]:checked').val(); 
}

你也可以通過在範圍，想

function myOperation(scope, name) { 
    return $(scope).closest('.branch').find('input[name="' + name + '"]:checked').val(); 
}

，然後執行類似

myOperation(this, 'fcolor');

來源

2011-02-23 17:44:24 hvgotcodes

var linec = getval($(this).closest('.branch'),'linec'); 


function getval(parent,name) { 
return parent.find('input:[' + name + ']:checked').val(); 
}

編輯：

這是更快太...

var branch = $(this).closest('.branch'); 

    var linec = getval(branch,'linec');

來源

2011-02-23 17:45:37 macarthy

假設你有名稱（而不是所有的名）的特定列表，你可以嘗試這樣的事：

var names = [ 
    'fcolor', 
    'bcolor', 
    'sidec', 
    'linec' 
]; 

var $inputs = $(this).closest('.branch').find('input:checked'); 
var values = {}; 

$.each(names, function(i,v){ 
    values[v] = $inputs.filter('[name='+v+']').val(); 
});

現在您有：

values.fcolor 
values.bcolor 
etc...

來源

2011-02-23 17:46:11

這裏有一個想法：

var closest = $(this).closest('.branch'); // don't re-compute this every time 
var inputs = ['fcolor','bcolor','sidec','linec']; // these are the names you'll be looking for, add as many as you need 
var values = {}; // here's where you will store your values 
for (var i in inputs) { 
    values[inputs[i]] = closest.find('input[name="' + inputs[i] + '"]:checked').val(); 
}

然後，您將讀取您的值爲：values.fcolor

來源

2011-02-23 17:47:36 Dan

首先要認識到，當您調用$(this)時，jQuery至少會執行一些函數調用和內存分配。所以你真的想緩存結果並重用它。

的第二件事情是，find必須做的工作，所以，再一次，緩存結果：

var branch = $(this).closest('.branch'); 
var fcolor = branch.find('input[name="fcolor"]:checked').val(); 
var bcolor = branch.find('input[name="bcolor"]:checked').val(); 
var sidec = branch.find('input[name="sidec"]:checked').val(); 
var linec = branch.find('input[name="linec"]:checked').val();

沒有，還是有一些重複出現;你可以創建一個「讓我的複選框匹配X的值」功能：

function getCheckedValue(ancestor, name) { 
    return ancestor.find('input[name=' + name + ']:checked').val(); 
}

那麼接下來：

var branch = $(this).closest('.branch'); 
var fcolor = getCheckedValue(branch, 'fcolor'); 
var bcolor = getCheckedValue(branch, 'bcolor'); 
var sidec = getCheckedValue(branch, 'sidec'); 
var linec = getCheckedValue(branch, 'linec');

然後，如果你真的想要，就能得到成一個列表這些名稱和循環，在這一點上取決於你的情況，這可能是完全合理的，或者它可能是你不需要的複雜性。

來源

2011-02-23 17:48:23

如何簡化或乾燥這個jQuery代碼的語法

回答

相關問題