使用 jquery 设置 div 数据属性答案

【问题标题】：Set div data attributes with jquery使用 jquery 设置 div 数据属性
【发布时间】：2020-07-05 09:39:16
【问题描述】：

我想通过 ajax 调用设置滑块范围的最小值和最大值。我试过 set attr 或 data 但所有选项都不起作用。如何设置 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');

【问题讨论】：

应该是.data("max")。
@user1688401 我检查了您的代码，它按预期工作，那么问题是什么？
您的第一个示例工作正常，正如您在我为您的问题编辑的 sn-p 中看到的那样。如果它对您不起作用，请检查控制台中是否没有错误。还要确保您已在页面中包含 jQuery 并在 DOM 加载之后运行您的 jQuery 代码。最后一点，请注意 attr() 和 data() 的表现非常不同，因此请研究它们以确保它们满足您的需求。
在带有data-min 的jQuery 对象上调用attr 函数应该可以工作。它也适用于上面的示例。

标签： javascript jquery html jquery-ui-slider

【解决方案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>

【讨论】：