Question

上传栏需要更新，我认为一切都是真的，但我无法更新data-value。

HTML代码：

<div id="Result_Success" class="progress-Bar" data-value="0"></div>

使用Javascript：

success: function (response) {
      $("#Result_Success").data('value', response["yuzdelik"]);
}

错误在哪里？

Answer 1

你需要

javascript $("#Result_Success").attr('data-value', response["yuzdelik"]);

Answer 2

另一种方法是直接访问元素的dataset属性来更改它。为此，您需要获取对原始DOM节点的引用，而不是由jQuery对象包装。您可以使用jQuery的get方法$("#Result_Success").get(0)或使用jQuery的array-like nature使用$("#Result_Success")[0]来获取原始DOM节点，就像我在下面的示例中所做的那样。

function setResponse (response) {
      $("#Result_Success")[0].dataset.value = response["yuzdelik"];
}


let val = 0;
let timer = setInterval(function () {
    setResponse({yuzdelik: val});
    if (val >= 100) {
      clearInterval(timer);
    } else {
      val += 25;
    }
  }, 500);

#prog {
  border: 1px #000 solid;
}
#Result_Success {
  height: 20px;
  background: #0f0;
}

#Result_Success[data-value="0"] {
  width: 0%;
}

#Result_Success[data-value="25"] {
  width: 25%;
}

#Result_Success[data-value="50"] {
  width: 50%;
}

#Result_Success[data-value="75"] {
  width: 75%;
}

#Result_Success[data-value="100"] {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prog">
<div id="Result_Success" class="progress-Bar" data-value="0"></div>
</div>

使用$("#Result_Success").data()不起作用的原因是它实际上不会修改data-属性。 jQuery在其自身内部存储了.data的数据集。 jQuery执行此操作而不是修改元素属性以避免circular references。关于DOM元素的循环引用现在并不是什么大问题，但当IE与它们更相关时，因为在旧版本的IE（特别是IE6）中，当你从DOM中删除元素时，它们would cause memory leaks。

由于jQuery将pull any data- attributes into its own internal data，因此它实际上正在做的事情会让人感到有些困惑。文档说明：

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值都在内部存储在jQuery中）。

Answer 3

错误在最后一行（不需要报价）：

$（＆＃34;＃Result_Success＆＃34;）。data（＆＃39; value＆＃39;，response.yuzdelik）;

无法更新“数据属性”值

3 个答案: