javascript - jQuery css 方法不接受函数参数

Question

所以我为 css 方法创建了一个具有 2 个参数的函数，我运行它但正在读取参数。宽度值在悬停时有效，但我在参数中传递的值正在读取

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

任何帮助都会很棒

Answer 1

您可以使用 computed property names

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

您也可以使用 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')