Comment rendre ma déclaration conditionnelle moins laide

Question

J'essaie de rendre les codes suivants moins moche et je ne sais pas quoi faire. Y a-t-il des suggestions de votre part? Merci beaucoup .

if($element.is('builder') || $element.is('#options')){ 
    tooltipYPos=yPos + 35; 
    } 

    if($element.is('#button')){ 
    tooltipXPos=xPos - 240; 
    } 
    if($element.is('#addn')){ 
    tooltipXPos=xPos - 295; 
    tooltipYPos=yPos - 80; 
    } 


    if($element.is('#count')){ 
    tooltipXPos=xPos + 180; 
    tooltipYPos=yPos - 90; 
    } 
    if($element.is('label')){ 
     tooltipXPos=xPos + 80; 
    tooltipYPos=yPos - 90; 
    } 

Answer 1

Pouvez-vous travailler la hauteur/largeur de l'élément $ puis modifier tooltipXPos/tooltipYPos en conséquence, au lieu de coder en dur les deltas?

Answer 2

en premier si vous pouvez combiner des conditions:

if ($element.is('#te_classbuilder, #te_options')) { 
    tooltipYPos = yPos + 35; 
} 

Si nous ne pouvions pas faire quelques grands changements alors je l'écrire de cette façon:

if ($element.is('#te_classbuilder, #te_options')) tooltip = { x: 0,   y: yPos + 35 }; 
if ($element.is('#lesson-details-extend-button')) tooltip = { x: xPos - 240, y: 0 }; 
if ($element.is('#asset-list-asset-add-button')) tooltip = { x: xPos - 295, y: yPos - 80 }; 
if ($element.is('#asmnt_option_label_q_count')) tooltip = { x: xPos + 180, y: yPos - 90 }; 
if ($element.is('label'))       tooltip = { x: xPos + 80; y: yPos - 90 }; 

Answer 3

Le remède général est de déplacer la problème du code aux données. Une solution (illustrée ci-dessous) consiste à configurer un tableau associatif JavaScript saisi sur les différentes étiquettes d'ID et les valeurs sont des paires de valeurs X et Y (dans certains cas, l'un ou l'autre est 0). Au moment de l'utilisation, parcourez les clés du tableau associatif à la recherche de correspondances. Si c'est le cas, ajoutez les offsets X et Y du tableau associatif sur toolTipXPos et toolTipYPos.

Cela permettra de garder vos offsets dans un endroit, à l'écart, et le code pour les manipuler court et simple.

(non testé, naturellement)

// This can be stashed away anywhere. 
var a = { 
    '#te_classbuilder':    { X: 0, Y: 35 }, 
    '#te_options':     { X: 0, Y: 35 }, 
    '#lesson-details-extend-button': { X: -240, Y: 0 }, 
    '#asset-list-asset-add-button': { X: 295, Y: -80 }, 
    '#asmnt_option_label_q_count': { X: 180, Y: -90 }, 
    "label":       { X: 80, Y: -90 } 
} 

// Put this where you need the actual evaluation to happen 
jQuery.each(data, function(key, value) { 
    if ($element.is(key)) { 
     tooltipXPos = xPos + value.X; 
     tooltipYPos = yPos + value.Y; 
    } 
}); 

Edit: changé en boucle, de sorte que label pourrait être dépistées et non #label.

Answer 4

Une autre option serait d'utiliser la fonction .data jQuery pour stocker les valeurs X et Y appropriée sur les éléments eux-mêmes, comme ceci:

$('label').data({ x: 80, y: -90 }); 
$('#te_classbuilder, #te_options').data({ x: 0, y: 35 }); 
$('#lesson-details-extend-button').data({ x: -240, y: 0 }); 
$('#asset-list-asset-add-button').data({ x: -295, y: -80 }); 
$('#asmnt_option_label_q_count').data({ x: 180, y: -90 }); 

Puis, quand vient le temps de modifier vos valeurs de position infobulle , aucune déclaration conditionnelle n'est requise. Récupérez simplement les attributs de données x et y de $element.

tooltipXPos = xPos + $element.data('x'); 
tooltipYPos = yPos + $element.data('y'); 

Ceci, bien sûr, suppose que tout élément qui peut être affecté à $element aura au préalable avait .data appelé avec les valeurs appropriées x et y.