命名参数 jQuery 函数答案

【问题标题】：Named Arguments jQuery Function命名参数 jQuery 函数
【发布时间】：2016-04-15 08:44:19
【问题描述】：

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

我认为代码大部分都可以，但由于某种原因，我得到了我的参数没有定义的消息，尽管函数传递了带有参数的对象。

我错过了什么？

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"
  });
});

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

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

【问题讨论】：

console.log("position: " + params.position);，在您的函数范围内没有名为position 的变量，而是params obejct 的属性

标签： jquery function arguments

【解决方案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);

【讨论】：

太棒了，非常感谢您的快速回复，就像一个魅力！并感谢其他所有人！

【解决方案2】：

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

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

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"
  });
});

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

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

【讨论】：

【解决方案3】：

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

如果你想分别引用position或background，那么你需要使用.操作符和param.position、param.background等参数或使用param['position']或param['background']。

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"
  });
});

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

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

【讨论】：

【解决方案4】：

默认参数是一个对象。读起来像：

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

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"
  });
});

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

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

【讨论】：