Question

我在一大堆单选按钮组上做同样的选择。唯一改变的是name。

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();

如何简化此代码，以便我不重复这样的代码？

Answer 1

如果您对具有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"

Answer 2

假设您有一个特定的名称列表（而不是所有名称），您可以尝试这样的事情：

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...

Answer 3

创建一个功能。从我看到的，除输入名称外，一切都是一样的。传递名称并构造你的字符串......

类似

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');

Answer 4

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');

Answer 5

这是一个想法：

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

Answer 6

首先要认识到，当你调用$(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');

然后，如果你真的想要，你可以得到一个这些名字的列表并循环通过它，在这一点上，根据你的情况，它可能是完全合理的，或者它可能是你不需要的复杂性

如何简化或干燥此jquery代码的语法

6 个答案: