使用“选择值”更改对象特性

Using Select Value to Change Objects Properties

本文关键字：对象 选择 选择值 使用      更新时间：2023-09-26

假设我有三个具有不同属性的对象foo、bar和baz。当我用这些值更改选择选项时，我将如何分配foo对象以包含对象的所有属性，而不仅仅是值。

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

JSFiddle示例

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，则触发change函数。

最好的解决方案是创建一个包含所有对象的父包装器对象，并使用括号表示法访问对象本身。

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

更新：

要进行深度克隆并忽略重复项，只需在中使用for来迭代对象键，然后简单检查对象是否已经具有此属性，如果是则忽略它，否则使用dot表示法将其分配为新属性

我希望算法是清晰的，不需要一个例子。

您应该有一个包含各种元素的对象，而不是变量。使用[]（括号）表示法来获得key的value，因为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]));
});
<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>

尝试这样的方法。

$('#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>

试试这个：

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

注意：将事件从"更改"更改为"单击"会在每次选择一些东西。

相关文章：