Comment simplifier ou sécher la syntaxe de ce code jquery

Question

Je fais la même sélection sur un tas de groupes de boutons radio. La seule chose qui change est le 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(); 

Comment puis-je simplifier ce code, donc je ne suis pas répéter le code comme ça?

Answer 1

Si vous êtes intéressé par toutes les entrées avec un attribut name, je les sélectionnerais tous, le créer un objet de propriétés et de valeurs.

Si vous avez besoin d'en sélectionner certains, donnez-leur une classe commune et sélectionnez-les.

var props = {}; 

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

Vous vous retrouverez avec une structure comme celle-ci:

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

... accessible:

props.fcolor; // "some value" 

Answer 2

créer une fonction. d'après ce que je vois, tout est pareil sauf le nom d'entrée. transmettre le nom et construire votre chaîne ....

quelque chose comme

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

vous pouvez passer aussi dans le cadre comme

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

puis exécuter comme

myOperation(this, 'fcolor'); 

Answer 3

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


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

EDIT:

C'est plus rapide aussi ...

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

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

Answer 4

En supposant que vous avez une liste spécifique des noms (et pas tous les noms), vous pouvez essayer quelque chose comme ceci:

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

Maintenant vous avez:

values.fcolor 
values.bcolor 
etc... 

Answer 5

est ici une idée:

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

Vous pouvez ensuite lire vos valeurs: values.fcolor

Answer 6

La première chose est de reconnaître que lorsque vous appelez $(this), jQuery fait au moins quelques appels de fonction et une allocation de mémoire. Donc, vous voulez vraiment mettre en cache le résultat et le réutiliser.

La deuxième chose est que find doit faire un travail, donc, encore une fois, mettre en cache le résultat:

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

Non, il y a encore quelques répéter là-bas; vous pouvez créer une fonction pour « me obtenir la valeur de la case à cocher correspondant à X »:

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

Alors:

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

Et puis, si vous voulez vraiment, vous pouvez obtenir en ayant une liste de ces noms et en passant à travers, à quel point en fonction de votre situation, il peut être parfaitement justifiable, ou ce peut être la complexité dont vous n'avez pas besoin.