Jquery получить значение атрибута при его изменении - PullRequest
Новая
       11

Jquery получить значение атрибута при его изменении

0 голосов
/ 15 июня 2019

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

<div class="element" data-settings={"apples":1,"bananas":4,"speed":300}>
</div>

Значения в data-settings могут быть изменены в моем приложении, однако код js, который обновляет значения, написан на Reactjs, минимизирован и нечитаем. Я просто хочу получить некоторые значения, используя простой jquery в моем собственном js.

В моем собственном js, когда я нажимаю .element, я хочу получить обновленное значение data-settings.

Мой код: 

$('.element').on('click', function() {
    console.log( $(".element").data("settings") );
});

Возвращает значения data-settings, но когда я обновляю параметр и снова нажимаю .element, он не возвращает обновленные значения.

Например, я обновляю apples до 8 в моем приложении. Я вижу data-settings={"apples":8,"bananas":4,"speed":300} в HTML, но в моем журнале консоли яблоки по-прежнему равны 1.

Я тоже пробовал: 

$('body').on('click', '.element', function() {
    console.log( $(".element").data("settings") );
});

и не работает.

Как я могу увидеть живые изменения атрибута данных settings в моем js?

1 Ответ

1 голос
/ 17 июня 2019

Вы должны использовать оба свойства JSON.parse() и JSON.stringify() 

$(document).on('click', '.show', function() {
  // Convert to JSON
  $settings = JSON.parse($(".element").attr("data-settings"));
  
  $settings.speed =  getRandomInt(500); // Update the value
  $settings.apples =  getRandomInt(10); // Update the value
  $settings.bananas =  getRandomInt(100); // Update the value
  
  // Convert to string
  $settings = JSON.stringify($settings);
  
  // Update in the Div
  $(".element").attr("data-settings",$settings);
  
  $('.result').append('<li>'+$settings+'</li>');
});


function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max) +1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" data-settings={"apples":1,"bananas":4,"speed":300}>

Click the "Generate" button to Update the value in the Div. 
Here I added a function to generate random integer values. 

</div>

<button class="show">Show</button>

<ul class="result">
  <li>{"apples":1,"bananas":4,"speed":300}</li>
</ul>
...