Question

我们说我有三个具有不同属性的对象foo，bar和baz。当我使用这些值更改选择选项时，如何指定foo对象以包含对象的所有属性，而不仅仅是值。

从我的示例中，您会看到我记录foo，但它将其设置为值，而不是对象的属性。

HTML

<select name="objects" id="objects">
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
  <option value="baz">Baz</option>
</select>

的JavaScript

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

$('#objects').on('change', function (e) {
    var foo = $(this).val();
    console.log($(this).val());
});

此外，如果他们选择了已经选择的选项，是否仍然会触发此选择事件？因此，如果选择foo，并再次选择foo，则触发更改功能。

Answer 1

最佳解决方案是创建一个包含所有对象的父包装器对象，并使用 bracket notation 访问该对象本身。

var objectsWrap=
{
 foo : {
  color: "red",
  height: 12
   },

 bar : {
  color: "blue",
  height: 10
   },

var baz : {
  color: "green",
  height: 5
   }
}

$('#objects').on('change', function (e) {
    var foo = objectsWrap[$(this).val()];
    console.log(foo);
});

毕竟选择值是一个字符串，必须评估为对象引用，并使用eval is not recommended at all

<强>更新

要进行深度克隆并忽略重复，您只需使用 for in 来迭代对象键，然后进行简单检查对象是否已经 has this property ，如果是，请忽略它，否则使用 dot notation

指定为新属性

我希望算法清晰，不需要示例。

Answer 2

你应该拥有包含各种元素而不是变量的对象。使用[]（括号）表示法获取value的{{1}}，因为key是变量。

试试这个：

key

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

var myObj = {
  foo: foo,
  bar: bar,
  baz: baz
};

$('#objects').on('change', function(e) {
  var val = $(this).val();
  alert(JSON.stringify(myObj[val]));
});

或变量为<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <select name="objects" id="objects"> <option value="foo">Foo</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select>（窗口的键），您可以使用global

访问它

试试这个：

window[KEY]

var foo = {
  color: "red",
  height: 12
};

var bar = {
  color: "blue",
  height: 10
};

var baz = {
  color: "green",
  height: 5
};

$('#objects').on('change', function(e) {
  var val = $(this).val();
  alert(JSON.stringify(window[val]));
});

Answer 3

尝试这样做。

$('#objects').on('change', function (e) {
    var foo = $(this).val();
    var color = $(this).find(':selected').data('color')
    var height = $(this).find(':selected').data('height')
    console.log(color);
    console.log(height);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="objects" id="objects">
  <option disabled selected value> -- select an option -- </option>
  <option value="foo" data-color="red" data-height="12">Foo</option>
  <option value="bar" data-color="blue" data-height="10">Bar</option>
  <option value="baz" data-color="green" data-height="5">Baz</option>
</select>

Answer 4

试试这个：

var definitions = {
   foo : {
      color: "red",
      height: 12
   },
   bar : {
      color: "blue",
      height: 10
   },
   baz : {
      color: "green",
      height: 5
   }
}

$('#objects').on('click', function (e) {
   var val = JSON.stringify(definitions[$(this).val()]);
   console.log(val);
});

注意：更改＆＃34;更改＆＃34;到＆＃34;点击＆＃34;每当你发射它选择一些东西。

使用选择值更改对象属性

4 个答案: