Javascript 如何仅使用jQuery而不使用数据属性在div中包含一系列细节？

请容忍我，因为我不知道如何用更简短的方式来解释这一点。我在这里发布的所有信息只是一个例子，这就是为什么它们听起来很奇怪。 所以，我想有一个角色选择页面，当你点击角色的肖像时，我想在一个单独的div中显示每个角色的属性。某些数据将显示在字符卡div上

我基本上有一个人物肖像列表，如下[html]：

<ul id="char-list">
  <li id="greengirl">Green Girl</li>
  <li id="maroonman">Maroon Man</li>
  <li id="whitwoman">White Woman</li>
  <li id="blackboy">Black Boy</li>
</ul>

<div id="char-card">
  <div id="char-name"></div>
  <div id="char-hair-color"></div>
  <div id="char-eye-color"></div>
  <div id="char-mag-power"></div>
</div>

然后像这样编写jQuery：

  ...
  <li id="greengirl" data-eye-color="Green" data-hair-color="Green" data-mag-power="322">Green Girl</li>
  ...

$('#char-list li').on('mouseup', function() {
  var eyeColor = $(this).data('eye-color'),
      hairColor = $(this).data('hair-color'),
      magPower = $(this).data('mag-power'),
      charName = $(this).text(),
      nameDiv = $('#char-name'),
      hairDiv = $('#char-hair-color'),
      eyeDiv = $('#char-eye-color'),
      magDiv = $('#char-mag-power');

  nameDiv.text(charName);
  hairDiv.text(hairColor);
  eyeDiv.text(eyeColor);
  magDiv.text(magPower);
});

这没有任何问题，但我正在尝试做一些相当复杂的事情，每个角色都有很多数据，包括每个角色的一个引号、4个能力图标、生命值、法力值、防御等。我只是不认为将它们全部放在每个项目的数据属性中是有效的。如果我遵循这种方法，我必须编辑html本身，这将意味着一个非常长且令人困惑的html。我已经找到了一种通过jQuery使某些属性易于应用的好方法：

var greenHairList = '#greengirl, #blueboy'
...
$(greenHairList).attr('data-hair-color', 'Green')

---

这样，它将通过jQuery应用，使我的html保持干净整洁。但是，这仍然使用数据属性。如果有任何其他方法可以用最少的数据属性实现我想要的，并用

字符卡
div
解决我的问题，我会很高兴。感谢所有能帮忙的人
 为什么您需要使用数据来获取详细信息

最好的解决方案是创建一个包含所有角色细节的对象列表。只需添加一个
数据id
，即可获得良好的数据

你可以：

var characters = [
      {
      id: 1,
      firstname:"john",
      lastname:"Doe",
      mana:150,
      power:2000
      },
      id: 2,
      firstname:"Karl",
      lastname:"Kanung",
      mana:120,
      power:300
      }
    ];

创建此列表时，可以为角色添加带有
数据id
的html元素dynamicali：

这只是循环中的一个示例：

    id = 3;
    characters.push({id: id, firstname: "Paul", lastname: "pool", mana: 500, power: 3000});
    charlist = $("<li></li>").attr("data-id",id);
    $("#char-list").append(charlist);
id++;

id=3；
推送（{id:id，名字：“保罗”，姓氏：“池”，法力：500，力量：3000}）；
charlist=$（“
”）.attr（“数据id”，id）；
$（“#字符列表”）.append（字符列表）；
id++；

你只需要做一个
onclick
函数，获取元素的
数据id
，在对象列表中签入显示和创建卡片的详细信息

最好的方法是在html页面中创建卡片上的alredy，并用对象值替换该值

这是一种方式
 为什么您需要使用数据来获取详细信息

最好的解决方案是创建一个包含所有角色细节的对象列表。只需添加一个
数据id
，即可获得良好的数据

你可以：

var characters = [
      {
      id: 1,
      firstname:"john",
      lastname:"Doe",
      mana:150,
      power:2000
      },
      id: 2,
      firstname:"Karl",
      lastname:"Kanung",
      mana:120,
      power:300
      }
    ];

创建此列表时，可以为角色添加带有
数据id
的html元素dynamicali：

这只是循环中的一个示例：

    id = 3;
    characters.push({id: id, firstname: "Paul", lastname: "pool", mana: 500, power: 3000});
    charlist = $("<li></li>").attr("data-id",id);
    $("#char-list").append(charlist);
id++;

id=3；
推送（{id:id，名字：“保罗”，姓氏：“池”，法力：500，力量：3000}）；
charlist=$（“
”）.attr（“数据id”，id）；
$（“#字符列表”）.append（字符列表）；
id++；

你只需要做一个
onclick
函数，获取元素的
数据id
，在对象列表中签入显示和创建卡片的详细信息

最好的方法是在html页面中创建卡片上的alredy，并用对象值替换该值

这是一种方式
 谢谢你的回复！这是因为我不太熟悉可以在jQuery中使用的方法，这就是为什么我问这个问题。但是谢谢你，我会试试的。不过我还是有点问题，因为我有100多个字符。如果我有100多个字符，有没有比你的答案更简单的方法？确切地说，我有106个。如果你用ajax方法调用你的字符列表，你可以很容易地使用我的函数循环。通过这一点，你可以获得所有的价值，并在每个对象中增加良好的价值。感谢您的回复！这是因为我不太熟悉可以在jQuery中使用的方法，这就是为什么我问这个问题。但是谢谢你，我会试试的。不过我还是有点问题，因为我有100多个字符。如果我有100多个字符，有没有比你的答案更简单的方法？确切地说，我有106个。如果你用ajax方法调用你的字符列表，你可以很容易地使用我的函数循环。通过这一点，您可以获得所有价值，并在每个对象中增加良好的价值。