Добавить json в data- атрибут

240
11 февраля 2018, 01:33

Добрый вечер! Есть такая структура:

...
<td><div data-js_control="{'missed':true}"></div></td>
<td<input name="active" type="checkbox">применить</td>
...

Как сделать, чтобы при изменении чекбокса добавлялось/удалялось значение в json, который находится в data-js_control Т.е. нажимаю чек и data-js_control={'missed':true,'where':'active'}. Изменяю значение чекбокса и обратно возвращается data-js_control={'missed':true}. При до загрузки страницы я не знаю какой будет параметр изначально data-js_control, но знаю какой добавлять

Answer 1

document.getElementById('cb').addEventListener('change', function() { 
  let div = document.getElementById('someId'); 
  // получаем значение с атрибута и парсим его в обьект 
  let jsonObj = JSON.parse(div.getAttribute('data-js_control')); 
  // изменяем нужное нам свойство в зависимости от значения чекбокса 
  jsonObj.where = this.checked ? 'active' : undefined; 
  // приводим наш обьект в JSON и записываем его в атрибут 
  div.setAttribute('data-js_control', JSON.stringify(jsonObj)); 
 
  console.log('new value : ', div.getAttribute('data-js_control')); 
});
<div id="someId" data-js_control='{"missed":"true"}'></div> 
<input id="cb" name="active" type="checkbox"><label for="cb">применить</label>

READ ALSO
Возможно ли ограничение зоны поиска DOM?

Возможно ли ограничение зоны поиска DOM?

Можно ли, например, для метода getElementById, сократить область поиска со всей страницы до какой-либо отдельной части HTML-документа? В примере

180
Как на Apache с PHP 7 запустить версию PHP 5.3

Как на Apache с PHP 7 запустить версию PHP 5.3

Есть локальный сервер на Apache с PHP версии 7 но в списке сайтов есть некоторые написаные с версией 53 и из за того что некоторый функционал не работает...

204
В sonata-admin скролл там, где он не нужен

В sonata-admin скролл там, где он не нужен

На каждой странице в Sonata-admin появляется скролл, даже если страница помещается в экранПример скролла

233
Сравнение ассоциативных массивов php

Сравнение ассоциативных массивов php

нужно сравнить несколько ассоциативных массивов, которые относятся к друг другу, как 1:мВсе реквизиты в массивах разбиты на группы с сходными...

243