Как включить ряд деталей в div, используя только jQuery без использования атрибутов данных?

Question

Пожалуйста, потерпите меня, потому что я не знаю, как объяснить это вкратце. Вся информация, которую я публикую здесь, является лишь примером, поэтому они звучат странно. Итак, я хотел иметь страницу выбора персонажа и хотел отображать атрибуты каждого персонажа в отдельном элементе, когда вы нажимаете на портрет персонажа. Определенные данные будут отображаться на карте персонажа.

У меня есть список портретов персонажей, например, [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>

Все персонажи имеют, например, три атрибута:hair-color, eye-color и magical-power. Я хочу отобразить это в #character-card div, когда пользователь нажимает на каждый символ.

Теперь я знаю, что могу установить data-attribute для каждой характеристики персонажа, например:

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

И напишите мой jQuery так:

$('#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 чистым и незагроможденным. Тем не менее, это все еще использует атрибуты данных. Я был бы рад, если бы существовали другие способы достижения того, чего я хочу, с минимальным использованием атрибутов данных и решением моей проблемы с помощью character-card div. Спасибо всем, кто может помочь!

Answer 1

Зачем вам нужно использовать данные для ваших данных?

Лучшее решение - создать список объектов со всеми вашими персонажами. И просто добавьте data-id для получения хороших данных.

Вы можете:

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

Когда вы создаете этот список, вы можете динамически добавлять элемент html с data-id для вашего персонажа. :

Это просто пример в цикле:

    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++;

и вы должны просто создать функцию onclick, получить элемент data-id, проверить список объектовдетали для показа и создания карты.

Лучше всего создать только на карте alredy на странице html и заменить значение значением объекта.

Это одинпуть.