如何简化或干燥这个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代码的语法

回答

相关问题