La méthode jQuery css n'accepte pas les arguments de la fonction

Question

donc j'ai créé une fonction qui a 2 arguments pour la méthode css, je la lance mais les arguments sont lus. Les valeurs de largeur de travail sur le vol stationnaire et hors tension, mais w/valeur e je passe par les arguments se lisent

function growImg(targetClass, imgClass, growPosition, growVal){ 
    $(targetClass).hover(
     function(){ 
     $(imgClass).css({'width': '25rem', growPosition : growVal});    
     }, 
     function(){ 
     $(imgClass).css({'width' : '12em'}); 
     } 
    ) 
    } 

// Calling function here 
growImg('.img-profile', '.profile-img', 'top', '25px') 

Toute aide serait grande

Answer 1

Vous pouvez utiliser computed property names

$(imgClass).css({'width': '25rem', [growPosition] : growVal}); 

Vous pouvez également utiliser shorthand property names

function growImg(targetClass, imgClass, top){ 
    $(targetClass).hover(
     function(){ 
     $(imgClass).css({'width': '25rem', top});    
     }, 
     function(){ 
     $(imgClass).css({'width' : '12em'}); 
     } 
    ) 
    } 

// Calling function here 
growImg('.img-profile', '.profile-img', '25px') 

Answer 2

Je pense i s que le JavaScript crée une clé appelée growPosition et lui attribue la valeur growVal. La raison en est que les objets JavaScript peuvent être créés sans ajouter de clés entre guillemets. L'analyseur ne pourra pas distinguer un nouvel objet avec une clé appelée growPosition et la variable growPosition. Essayez d'utiliser la syntaxe du support d'objet:

function growImg(targetClass, imgClass, growPosition, growVal){ 
    $(targetClass).hover(
     function(){ 
      var customCSS = { width: '25rem' }; 
      customCSS[growPosition] = growVal; 

      $(imgClass).css(customCSS);    
     }, 
     function(){ 
      $(imgClass).css({'width' : '12em'}); 
     }); 
    } 

// Calling function here 
growImg('.img-profile', '.profile-img', 'top', '25px')