Question

我有以下HTML

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

data-settings中的值可以在我的应用程序中更改，但是更新值的js代码是用Reactjs编写的，因此已缩小并且不可读。我只想在自己的js中使用简单的jquery获得一些值。

在我自己的js中，当我单击.element时，我想获取data-settings的更新值。

我的代码：

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

它返回data-settings的值，但是当我更新设置并再次单击.element时，它不返回更新的值。

例如，我将我的应用程序中的apples更新为8。我在HTML中看到data-settings={"apples":8,"bananas":4,"speed":300}，但在控制台日志中，苹果仍然是1。

我也尝试过：

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

并且不起作用。

如何在我的js中看到对数据属性settings的实时更改？

Answer 1

您应该同时使用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>

jQuery获取随其变化的属性值

1 个答案: