как установить свойство JSON в атрибуте данных (HTML5)

0

У меня есть следующий элемент:

<div id="car" data-details='{ "color":"blue", "price":2000" }'></div>

Я хотел бы изменить свойство "цена" с помощью jQuery или JS:

Пожалуйста, ознакомьтесь с этим JSfiddle: http://jsfiddle.net/mLuz9/

Я пробовал:

$("#car").attr("data-details", '{"color" : "red", "price": 5000}');

но для этого требуется, чтобы "цвет" был установлен одновременно, я хочу только установить свойство "цена".

  • 1
    Вы можете сделать два атрибута данных, один для цвета и один для цены.
  • 0
    Получить значение атрибута, проанализировать значение, обновить свойство price объекта, преобразовать его в JSON и установить атрибут элемента. Если вы думали, что есть более прямой путь, его нет.
Показать ещё 1 комментарий
Теги:
custom-data-attribute

1 ответ

1
Лучший ответ

Извлеките JSON из атрибута данных в переменную, отредактируйте переменную и повторно установите атрибут с обновленной переменной.

Что-то вроде этого должно работать:

<div id="car" data-details='{ "color":"blue", "price":2000 }'></div>

// Pull the info from the data-details attribute into a variable called 'details'
var details = JSON.parse($('#car').attr('data-details'));

// Change the price property in our variable
details.price = 5000;

// Write the variable version of details back to the data-details
// attribute on the DOM element
$('#car').attr('data-details', JSON.stringify(details));

$("html").append($("#car").attr("data-details"));

Обновленная версия вашей скрипки: http://jsfiddle.net/mLuz9/3/

Поделиться
  • 0
    Спасибо, но это не похоже на работу. Проверьте мой JSfidle, чтобы увидеть.
  • 0
    .data обновляет только внутреннее хранилище jQuery, а не атрибут элемента.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню