命名参数jQuery函数

Question

我想将参数传递给列表中的函数，而不必保持某个顺序，并且只能传递一个或根本没有参数，等等。

我认为代码基本上没问题，但由于某种原因，我得到的信息是我的参数没有被定义，尽管函数传递带有参数的对象。

我错过了什么？

＆＃13;

＆＃13;

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + position);

  div2.css('position', position);
  div2.css('background', background);
  div2.css('height', height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

＆＃13;

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这些不是变量，而是params对象的属性。

更改

div2.css('position', position);
div2.css('background', background);
div2.css('height', height);

到

div2.css('position', params.position);
div2.css('background', params.background);
div2.css('height', params.height);

Answer 2

在函数范围内，没有名为position的变量，而是params对象的属性。

由于params是css属性，因此您可以使用将对象作为其值而不是设置每个对象的css变体

＆＃13;

＆＃13;

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + params.position);

  div2.css(params);

  //div2.css('position', params.position);
  //div2.css('background', params.background);
  //div2.css('height', params.height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

＆＃13;

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需使用div2.css(params);，因为css()函数会将对象作为输入。

如果您想单独引用position或background，则需要使用.运算符和param.position，param.background之类的参数或使用param['position']或param['background']。

＆＃13;

＆＃13;

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  div2.css(params);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

＆＃13;

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

默认值param是一个对象。阅读如下：

  console.log("position: " + defaults.position);
  div2.css('position', defaults.position);
  div2.css('background', defaults.background);
  div2.css('height', defaults.height);

＆＃13;

＆＃13;

function positioning(options) {

  var defaults = {
    position: "static",
    background: "lightblue",
    height: "100px"
  };

  var params = $.extend({}, defaults, options);

  var div1 = $('#div1'),
    div2 = $('#div2');

  console.log(options);
  console.log(params);
  console.log("position: " + defaults.position);

  div2.css('position', defaults.position);
  div2.css('background', defaults.background);
  div2.css('height', defaults.height);
}

$('button').click(function() {

  positioning({
    height: "200px"
  });
});

＆＃13;

#div1 {
  width: 100%;
  height: 100px;
  background: lightgrey;
}
#div2 {
  width: 100%;
  height: 100px;
  background: lightblue;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
<button type="button">trigger function</button>

＆＃13;

＆＃13;

＆＃13;