从点击事件[jQuery / JavaScript]上的JSON循环中获取单个值

Question

首先，抱歉我的英语。

大家好，

我正在尝试创建一个实际上是排名的小应用程序。我正在从JSON文件中恢复数据。

该应用程序分为两部分：左栏包括所有参与者及其名称和图片，右栏显示其特征。

我想在单击图片时在右栏中显示完全相同的值。

• 我制作了一个JSON文件
• 我使用$ .getJSON来恢复我的数据
• 我做了一个每个循环并显示左侧的所有数据（它工作）
• 当我点击图片时，我添加了一个“活动”类

这是我的JSON示例文件：

{
  "data": {
    "personalities": [
      {
        "position": 1,
        "name": "Jeff Bezos",
        "country": "America",
        "gender": "men",
        "photo": "rank1.jpg",
        "description": "Donec sit amet elit a nulla sagittis sollicitudin eu nec eros. Nam finibus, leo bibendum interdum dictum, velit turpis faucibus purus, quis blandit lectus tortor sed felis. Suspendisse viverra massa a condimentum pharetra. Proin convallis sit amet mi vitae tincidunt. Duis vitae pretium orci, et mattis metus.",      },
      {
        "position": 2,
        "name": "Bill Gates",
        "country": "American",
        "gender": "men",
        "photo": "rank2.jpg",
        "description": "Donec sit amet elit a nulla sagittis sollicitudin eu nec eros. Nam finibus, leo bibendum interdum dictum, velit turpis faucibus purus, quis blandit lectus tortor sed felis. Suspendisse viverra massa a condimentum pharetra. Proin convallis sit amet mi vitae tincidunt. Duis vitae pretium orci, et mattis metus."
      }
    ]
  }
}

这是我的循环，显示左侧的所有信息（工作正常）：

$.each(result.data.personalities, function(index, element) {
        const box = document.createElement("div");
        boxPersonalities.className = "box_personalities";
        columnLeft.append(box);

        const picture = document.createElement("img");
        picture.className = "box_personalities-picture";
        picture.src = path + element.photo;
        boxPersonalities.append(picture);

        const containerTitle = document.createElement("div");
        containerTitle.className = "box_personalities_container-title";
        boxPersonalities.append(containerTitle);

        const position = document.createElement("h1");
        position.className = "box_personalities_container-title-position";
        position.innerHTML = element.position + "&#160";
        containerTitle.append(position);

        const name = document.createElement("h1");
        name.className = "box_personalities_container-title-name";
        name.innerHTML = element.name;
        containerTitle.append(name);

我试过这样的东西，但它没有用。我想在单击图片时在右栏中显示完全相同的值。在右侧，我将添加更多信息，如性别，国家，描述等。

console.log（index）给我左侧图片的关联号码。以下代码位于每个循环内。

$(".box_personalities").each(function(index) {
          $(this).click(function() {
            console.log(element.name);
          });
        });
// Want to display the EXACT SAME value on the right than picture clicked on the left

如果您有任何疑问，请告诉我，非常感谢您的帮助

Answer 1

你可以这样做：

<div class="anyclass" data-element='{"id":'1',"name":'abc'}'></div>
<div class="anyclass" data-element='{"id":'2',"name":'abcd'}'></div>
<div class="anyclass" data-element='{"id":'3',"name":'abcde'}'></div>
<div class="anyclass" data-element='{"id":'4',"name":'abcdef'}'></div>
<script type="text/javascript">
$('.anyclass').click(function() {
 console.log($(this).data('element'));
});
</script>

当你的div在dom上制作然后点击任何div你就可以获得数据。