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

【问题标题】：Get a single value from JSON looping on a click event [jQuery/JavaScript]从点击事件的 JSON 循环中获取单个值 [jQuery/JavaScript]
【发布时间】：2019-09-08 13:16:02
【问题描述】：

首先，对不起我的英语。

大家好，

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

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

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

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

这是我的 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

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

【问题讨论】：

你可以像下面这样：$('.anyclass').click(function() { console.log($(this).data('element')); }); 当你的 div 是在 dom 上创建的，然后点击任何 div 你就可以获得数据。
您好 Vivek，感谢您的评论。我会掠夺。也许你能格式化代码吗？非常感谢。

【解决方案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 你就可以获得数据。

【讨论】：

好的，我明白了，我必须在我的 div 上添加一个数据属性并从数据属性中恢复数据，对吧？
是的，你是对的.....请投票支持你从我的代码中获得任何帮助，谢谢。