我遇到 .data 问题，这是第二次。如果我在这里使用 .data 它不会添加任何数据属性:
delete_button.data('to-do', toDoCount);
和上次一样，它可以正常工作
delete_button.attr('data-to-do', toDoCount);
我关注了https://api.jquery.com/data/ ，特别是 $( "body").data( "foo", 52 );
// Create an initial toDoCount variable
var toDoCount = 0;
// On Click event associated with the add-to-do function
$("#add-to-do").on("click", function(event) {
// prevent form from submitting
event.preventDefault();
// Get the to-do "value" from the textbox and store it a variable
var thing_todo = $('#to-do').val().trim();
// Create a new variable that will hold a "<p>" tag.
// Then give it an ID in the following form:
// "item-4" or "item-3" or "item-99", where the number is equal to toDoCount.
// Then append the to-do "value" as text to this <p> element.
var new_todo_element = $("<p>");
new_todo_element.attr('id', 'item-' + toDoCount);
new_todo_element.append(' ' + thing_todo);
// Create a button with unique identifiers based on what number it is in the list. Again use jQuery to do this.
// Give your button a data attribute called data-to-do and a class called "checkbox".
// Lastly append the letter X inside.
var delete_button = $("<button>");
delete_button.data('to-do', toDoCount);
// delete_button.attr('data-to-do', toDoCount);
delete_button.addClass('checkbox');
delete_button.append('X');
// Append the button to the to do item
new_todo_element.prepend(delete_button);
// Add the button and toDoItem to the to-dos div
$('#to-dos').append(new_todo_element);
// Clear the textbox when done
$('#to-do').val('');
// Add to the toDoCount
toDoCount += 1;
});
// When a user clicks a check box then delete the specific content
// (NOTE: Pay attention to the unusual syntax here for the click event.
// Because we are creating click events on "dynamic" content, we can't just use the usual "on" "click" syntax.)
$(document.body).on("click", ".checkbox", function() {
// Get the number of the button from its data attribute and hold in a variable called toDoNumber.
// var item_id =
// Select and Empty the specific <p> element that previously held the to do item number.
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>To Do App!</title>
<style>
#todo-item {
font-weight: 700;
font-size: 2em;
}
</style>
</head>
<body>
<!-- Title -->
<h1>My To Do's!</h1>
<!-- Input Form -->
<form>
<span id="todo-item">To Do Item: <input id="to-do" type="text" ><input id="add-to-do" value="Add Item" type="submit"></span>
</form>
<hr>
<!-- To-Do List -->
<div id="to-dos"></div>如何在此按钮上设置数据属性？
最佳答案
别担心，你做的一切都是对的。使用 data() 函数设置内容不会更改底层 HTML，但仍然允许您稍后使用 data() 检索它。来自文档:
The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).
这样做的原因当然是优化 - 当您稍后要通过 jQuery 检索 HTML 时，为什么还要编辑 HTML？如果您需要实际编辑文档，attr() 是您的 friend 。
关于javascript - jQuery .data() 未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44013697/