Получите одно значение из цикла JSON для события щелчка [jQuery / JavaScript] - PullRequest
Новая
       14

Получите одно значение из цикла JSON для события щелчка [jQuery / JavaScript]

0 голосов
/ 18 апреля 2019

Прежде всего, извините за мой английский.

Привет всем,

Я пытаюсь создать небольшое приложение, которое на самом деле является рейтингом. Я восстанавливаю данные из файла 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

Скажите, если у вас есть вопросы, Большое спасибо за вашу помощь

1 Ответ

0 голосов
/ 18 апреля 2019

Вы можете сделать, как показано ниже: 

<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 вы можете получить данные.

...