Question

所以我创建了一个函数，它有两个css方法的参数，我运行它，但参数被读取。宽度值在悬停时开启，但在参数中传递的w / e值正在读取

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

Answer 2

我的猜测是JavaScript正在创建一个名为growPosition的密钥，并为其分配growVal的值。原因是可以在不添加引号中的键的情况下创建JavaScript对象。解析器无法区分具有名为growPosition的密钥的新对象和变量growPosition。尝试使用对象括号语法：

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

jQuery css方法不接受函数参数

2 个答案: