De ce funcția .data() din jQuery nu merge?
Am probleme cu funcția .data(), aceasta este deja a doua oară. Dacă folosesc .data - nu se adaugă nici un atribut:
delete_button.data("to-do", toDoCount);
Mai înainte foloseam funcția attr, și ea funcționează perfect
delete_button.attr('data-to-do', toDoCount);
Am făcut totul ca în documentația jQuery. $("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>Cum pot seta atributele acestui buton prin funcția data? Mulțumesc
Nu vă faceți griji, codul pe care l-ați scris este corect. Setarea valorilor în atribute folosind funcția data() are ca scop să vă permită să selectația datele mai târziu din aceste atribute folosind tot funcția data(), și da, această funcție poate să nu modifice codul HTML al paginii. Informație din documentație:
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).
Motivul este simplu, optimizarea vitezei - de ce editați HTML (DOM-ul) atunci când oricum ai de gând să recuperzi datele setate prin jQuery? Dacă aveți nevoie să editați anume codul HTML, folosiți funcția attr().
