javascript - 有没有办法通过变量从对象中获取信息？

Question

这是我第一次使用对象，所以我还在学习一点 JavaScript/jQuery。

我有一个函数，当我单击时，一个变量被设置为我单击的图像的类。我想要运行另一个函数来根据前一个变量编辑对象中的值。我知道我想做的事情看起来像这样:

marri.selected = 1;

我遇到的问题是这样的:

// in this case, let's say I clicked on one called 'marri'
character = $(".units a").attr("class");

// what I want this to read is 'marri.selected = 1' but as any name through the variable 'character'
character.selected = 1;

那么这可以通过其他方式实现吗？

Answer 1

我假设你实际上可能拥有多个 Angular 色。因此，在单个对象中维护字符列表可能是有意义的。每个 Angular 色的统计数据都是该对象的属性。这反过来又可以按照您想象的方式动态引用相关属性。

假设您有一个如下所示的 characters 对象:

var characters = { 
  "marri": { selected: 0},
  "someOtherCharacter": { selected: 0 }
}

您可以按照您所写的那样根据其类别获取 Angular 色:

characterName = $(".units a").attr("class");

(或者，如果您响应对该元素的点击，它实际上可能是 characterName = $(this).attr("class");。)

...然后使用该字符值通过 bracket notation 来引用对象中的属性:

characters[characterName].selected = 1;

演示:

var characters = {
  "marri": {
    selected: 0
  },
  "someOtherCharacter": {
    selected: 0
  }
}


$(function() {
  $(".units a").click(function(e) {
    e.preventDefault();
    characterName = $(this).attr("class"); //slightly different to the above example - this directly gets the class of the clicked link
    characters[characterName].selected = 1;
    console.log(characters); //just to show the object has been updated
  });



});

.units a
{
  padding: 5px;
  border: 1px solid #cccccc;
  margin: 1px;
}

.units a:hover
{
  cursor:pointer;
  background-color: #cccccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="units">
  <a class="marri">Marri</a>
  <a class="someOtherCharacter">Some Other Character</a>
</div>