Question

我正在尝试通过jquery更改数据进度

这样做

$("#changeme").data('progress','100');

我也尝试过

$("#changeme").attr('data-progress','100');
$("#changeme").prop('data-progress','100');

它不起作用，我也不知道该怎么办。

<div id="changeme" style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-progress="23" data-color="#229922" data-background="aqua" data-speed="500">
    <div class="tox-progress-content" data-vcenter="true">
        <p style="padding-left:40px;padding-top:10px;"></p>
    </div>
</div>

更新：非常感谢您的帮助，但是我已经尝试了所有建议的内容，但仍然不会更新。它是一个圆形进度条，数据进度告诉它要填充多少。它不会改变我最初设置的初始值。

更新2：我已解决问题！我忘记了激活循环进度条的脚本，该进度条位于标题中，并在document.ready之前加载。谢谢大家的帮助！

Answer 1

Demo

Reference

从参考文献：

jQuery本身使用.data（）方法以“事件”和“句柄”的名称保存信息，并且还保留任何以下划线（_）开头的数据名称供内部使用。

应注意，jQuery的data（）不会更改HTML中的data属性。

因此，如果您需要更改HTML中的data属性，则应改用.attr（）。

<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-color="#229922" data-background="aqua" data-progress="23" data-speed="500">
<div class="tox-progress-content" data-vcenter="true">
    <p style="padding-left:40px;padding-top:10px;"></p>
</div>

s

var a = $('#mydiv').data('data-thickness'); //getter

$('#mydiv').data('data-thickness',20); //setter

Answer 2

您需要阅读有关jquery函数.data()和.attr()的更多信息，文档将帮助您理解 .data 。 attr

.data（）：存储与匹配的元素关联的任意数据，或在已命名的数据存储中为匹配的元素集中的第一个元素返回值。

.attr（）：获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

例如，如果您具有此dom元素

List<MessageItem> _messageItems = <MessageItem>[];


// Reads the data and creates the widgets (all OK here)
// Called when reading the data <<<
_readDBMessages() async {
    List<Map> messages = await readMessages(_threadID);
    List<MessageItem> holderList = <MessageItem>[];
    for (final msg in messages) {
        holderList.add(new MessageItem(
            msg['message'],
            msg['timestamp'],
            msg['status'],
            _contactData['photo']));
    }

    _messageItems.clear();
    setState(() {
        _messages = msges;
        _messageItems = holderList;
    });
}


// When I use _messageItems.add(new MessageItem()); the item shows as expected but it
// it's located on top of the list. Since my ListView is reverse
// I instead use _messagesInsert(0, new MessageItem()); in doing so
// The list is not updated. Scrolling up/down will than proceed to
// show the item as expected.
// Called when storing the data <<<

_storeNewMessage(String message) {
    int timestamp = new DateTime.now().millisecondsSinceEpoch;
    storeMessage(_threadID, message, _me, 'sending', timestamp, 'text').then((onValue) {
            // _readDBMessages();
            setState(() {
                _messageItems.add(
                    new MessageItem(
                        message, timestamp, 'sending', null
                    )
            );

            print('Message inserted ---------------');
        });
    });
}


// Here's my listView constructor <<<
new Expanded(
    child: new ListView.builder(
        reverse: true,
        padding: const EdgeInsets.all(12.0),
        itemCount: (_messageItems == null) ? 0 : _messageItems.length,
        itemBuilder: (context, i) => _messageItems[i]
    )
),

尝试评估这些值

<a id="link1" data-test="initvalue" href="#">link1!</a>

Answer 3

一切正常。检查下面的更新的片段...

使用.data（）

$('#changeme').data('progress',100);
console.log("data-progress: " + $('#changeme').data('progress'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-color="#229922" data-background="aqua" data-progress="23" data-speed="500">
  <div class="tox-progress-content" data-vcenter="true">
    <p style="padding-left:40px;padding-top:10px;"></p>
  </div>
</div>

使用属性

$('#changeme').attr('data-progress',100);
console.log("data-progress: " + $('#changeme').attr('data-progress'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-color="#229922" data-background="aqua" data-progress="23" data-speed="500">
  <div class="tox-progress-content" data-vcenter="true">
    <p style="padding-left:40px;padding-top:10px;"></p>
  </div>
</div>

Answer 4

使用

.attr({"data-progress":"25"}),

基本上，您需要传递一个键值为key的对象，其中key为属性名称，value为属性值。

console.log("Before : "+$("#changeme").attr("data-progress"));

$("#changeme").attr({"data-progress":"25"});

console.log("After : "+$("#changeme").attr("data-progress"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-progress="23" data-color="#229922" data-background="aqua"  data-speed="500">
                                <div class="tox-progress-content" data-vcenter="true">
                                    <p style="padding-left:40px;padding-top:10px;"></p>
                                </div>

Answer 5

尝试一下

<div id="changeme"  style="padding-left:10px;" class="tox-progress" data-size="120" data-thickness="8" data-color="#229922" data-background="aqua" data-progress="23" data-speed="500">
	<div class="tox-progress-content" data-vcenter="true">
		<p style="padding-left:40px;padding-top:10px;"></p>
	</div>
</div>

<script>
	document.getElementById('changeme').setAttribute('data-progress', 100);
</script>

实际上不需要使用jquery。您可以为此使用javascript。我唯一会使用jquery的时候就是我需要它，否则其他明智的本机javascript就可以了

要记住的重要一件事是确保您的JavaScript位于页面末尾。这样，它将看到您要操作的dom元素

我经常遇到这个问题，即使脚本正确无误，脚本也无法正常工作。只是发现我需要将其放在页面末尾或要操作的dom元素下方的onload事件$（document）.ready中

Answer 6

要清楚

attr()方法将DOM属性替换为给定值，并且仅限于string类型。
data()方法用于存储与元素相关的任何有效数据类型的任意信息。无法通过DOM操作访问它们。

attr()如何工作？ Official Documentation

设置值：它可以设置HTML元素DOM的属性值。所做的更改将立即反映出来，并可以在控制台（检查元素）中看到

(1) $(element).attr(key,value)-要在元素上设置的属性值对。

(2) $(element).attr(obj)-将属性值对更新为元素的对象。

(3) $(element).attr(key,<callback_function>)-从回调函数返回要更新为元素属性的值。

读取值：$(element).attr(key)

它返回DOM中的属性值。建议仅对属性使用attr()，对属性使用prop()。

版本依赖性（设置和读取）：在1.6版之前，还可以通过attr()方法添加属性。从1.6版开始，jQuery提供了prop()方法来更新元素的属性。像checked，disabled，selected等...

data()如何工作？ Official Documentation

存储值：$(element).data(key,value)

它将信息存储在映射到每个元素的唯一jQuery ID的缓存（$.cache）中。唯一ID从0开始，并针对每个新元素递增。这些属性不会在DOM中更新。因此，使用原始Javascript HTMLElement.dataset[key]或HTMLElement.getAttribute("data-*")不会返回任何内容。

对于data-属性，在存储到缓存之前，密钥为camelCased。

版本依赖性：：在jQuery 1.4.4之前，该方法完全替换了数据对象，而不是使用elements属性扩展它。

读取值：(1) $(element).data()，(2) $(element).data(key)

（1）返回分配给该元素的所有数据。

版本依赖性：如前所述，在版本1.4.4之前，该方法仅返回由$(element).data(key,value)设置的值，HTML中不会包含data-属性回到。因此，建议使用最新版本。

（2）返回分配给元素上键的值。如果密钥存在于缓存中，则将其返回，否则将返回相关的data-属性。

<div id="data" data-progress-bar="20"></div>

$("#data").data("progress-bar",100);
console.log($("#data").data("progress-bar")); //consoles 100

$(document).ready(function(){
    console.log($("#data").data("progress-bar"));
    console.log($("#data").data("progressBar"));
    console.log($("#data").data()["progress-bar"]);
    console.log($("#data").data()["progressBar"]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="data" data-progress-bar="20"></div>

在以上代码段中，

$(element).data("progress-bar")-返回20-从data-属性获取数据。

$(element).data("progressBar")-返回20-将camelCased字符串转换为连字符，并从data-属性获取数据。

$(element).data()["progress-bar"]-从缓存中获取数据对象，但返回undefined，因为密钥将不存在。此方法与第二种方法的区别在于，第二种方法在内部将连字符的字符串转换为camelCased。

$(element).data()["progressBar"]-从缓存中获取数据对象并返回密钥的值。

最后，

使用attr（）：

$(document).ready(function(){
    console.log("Before setting : "+$("#data").attr("data-progress"));
    $("#data").attr("data-progress",100);
    console.log("After setting : "+$("#data").attr("data-progress"));
    console.log("After setting (acessing via JavaScript) : "+document.querySelector("#data").getAttribute("data-progress"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="data" data-progress="20"></div>

使用数据（）：

$(document).ready(function(){
    console.log('Before setting : $("#data").data("data-progress") : '+$("#data").data("data-progress"));
    console.log('Before setting : $("#data").data("progress") : '+$("#data").data("progress"));
    $("#data").data("data-progress",100);
    console.log('After setting : $("#data").data("data-progress") : '+$("#data").data("data-progress"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<div id="data" data-progress="20"></div>

如何使用Jquery设置数据属性？

6 个答案: