Question

我之前发布了此问题的一个版本（JS - Constructor referencing），并在重复项中找到了答案，尤其是Access / process (nested) objects, arrays or JSON。从这里开始，我仍然有一段荒谬的时间让它按预期工作。

给出以下示例代码：

    function f1(args) {
        this.defaults = {
            param1 : 100,
            param2 : 900;
        }
        this.ranges = {
            param1 : { min : 0, max : 500 },
            param2 : { min : 0, max : 1000 };
        }
        this.steps = {
            param1 : 50,
            param2 : 100;
        }
    var myF1 = new f1();

我已经阅读了之前的重复项，并通过以下方式学习访问未知属性名称：

    for (var propertyName in myF) {
        newName = propertyName;
    }

我需要做的是循环使用函数（或任何函数）并为函数构建HTML5范围输入（请记住，参数名称将大不相同或随机，所以我假设我需要为密钥本身。因此，在f1 / myF1的情况下，生成的HTML5将是：

    param1: <input type="range" name="param1" min="0" max="500" steps="50" />
    param2: <input type="range" name="param2" min="0" max="1000" steps="100" />

注意：range =，name =，min =，max =和step =的值都是从函数的属性中动态生成的。

我已经尝试过循环键，调用值和几乎任何其他研究并尝试我可以，但我总是最终变量覆盖自己，我猜这只是比这个业余更深入游泳运动员可以搞清楚。

另外，要意识到每个参数都有defaults，ranges和steps，因此我们不必担心随机化或变异的程度。谢谢SO-JS大师！

Answer 1

首先，您的示例中有两个错误。

function f1(args) {的左括号未关闭。
this.defaults和this.steps中最后一个条目的分号不应该在那里。

以下代码应该（依赖jQuery $）创建两个类型范围正确工作的输入元素，尽管代码强烈依赖于给定的数据格式。一个输入元素通过循环myF1.steps属性获取值，并在defaults和ranges上尝试使用每个名称。辅助函数applyAttr通过另一个propertyName或直接值安全地访问这些值。

工作plunker

$(document).ready(function() {

  function f1(args) {
    this.defaults = {
        param1 : 100,
        param2 : 900
    }
    this.ranges = {
        param1 : { min : 0, max : 500 },
        param2 : { min : 0, max : 1000 }
    }
    this.steps = {
        param1 : 50,
        param2 : 100
    }
  }
  var myF1 = new f1();

  function applyAttr(inElem, data, propName) {
    if(data.hasOwnProperty(propName))
      inElem.prop(propName, data[propName]);
    else {
      inElem.prop(propName, data);
    }
  }

  for(var stepsProp in myF1.steps) {
    var inputElem = $('<input type="range"/>');
    inputElem.prop('step', myF1.steps[stepsProp]);
    if(myF1.defaults.hasOwnProperty(stepsProp)) {
      inputElem.prop('value', myF1.defaults[stepsProp]);
    }
    if(myF1.ranges.hasOwnProperty(stepsProp)) {
      applyAttr(inputElem, myF1.ranges[stepsProp], 'min');
      applyAttr(inputElem, myF1.ranges[stepsProp], 'max');
    }
    $('body').append(inputElem);
  }
});

Answer 2

看起来您宁愿迭代myF1.defaults，myF1.ranges或myF1.steps的属性，而不是myF1本身的属性（因为它们是固定的）。

我不知道您尝试了什么，但这就是您可以创建所需DOM元素的方法：

var myF1 = new f1();
var elements = [];

for (var param in myF1.ranges) {
    var input = document.createElement('input');
    input.type = 'range';
    input.name = param;
    input.min = myF1.ranges[param].min;
    input.max = myF1.ranges[param].max;
    input.step = myF1.steps[param];
    input.value = myF1.defaults[param];

    var span = document.createElement('span');
    span.appendChild(document.createTextNode(param + ': '));
    span.appendChild(input);
    elements.push(span);
}

只需遍历ranges的属性，即可访问steps和defaults的相同属性。然后，您可以使用elements执行任何操作。 DEMO

JS - 属性名称访问

2 个答案: