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

Question

首先，对不起我的英语。

大家好，

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

该应用程序分为两部分：左栏包含所有参与者及其姓名和照片，右栏显示他们的特征。

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

我做了一个JSON文件
我使用 $.getJSON 恢复了我的数据
我做了一个 each 循环并在左侧显示所有数据（有效）
我在点击图片时添加了一个class "active"

这是我的 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 您可以获得数据。

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

Get a single value from JSON looping on a click event [jQuery/JavaScript]

javascript

jquery

loops

click