使用jquery设置di v数据属性

Question

我想通过ajax调用设置滑块范围的最小值和最大值。我尝试设置attr或数据，但所有选项均不起作用。如何设置div属性？

$('#card-price-Div-Slide').attr('data-min','20');
$('#card-price-Div-Slide').attr('data-max','40');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="card-price-Div-Slide"
  class="slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
  data-min="0"
  data-max="600"
  data-values="[0,600]"
  data-target="#price-range"
  data-label-min="#price-range-label-min"
  data-label-max="#price-range-label-max">Foo</div>

我也尝试过：

$('#card-price-Div-Slide').data('data-min','20');
$('#card-price-Div-Slide').data('data-max','40');
$('#card-price-Div-Slide').setAttribute('data-min','20');

Answer 1

const element = document.querySelector('#card-price-Div-Slide');

element.setAttribute('data-min', 0);
element.setAttribute('data-max', 1000);

console.log(element.getAttribute('data-min'));
console.log(element.getAttribute('data-max'));

<div id="card-price-Div-Slide"
  class="slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"
  data-min="5"
  data-max="600"
  data-values="[0,600]"
  data-target="#price-range"
  data-label-min="#price-range-label-min"
  data-label-max="#price-range-label-max">
  Foo
</div>