#javascript #jquery
#javascript #jquery
Вопрос:
У меня есть список дел. Чего я хочу, так это того, что когда я нажимаю на задачу, он собирается ввести данные, после чего у меня есть кнопка «Сохранить», но я не знаю, как дальше, как вернуть ту же сохраненную задачу в список?
Кроме того, я знаю, что мне нужно добавить идентификатор li , но как добавить к каждому новому li идентификатору?
// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'></i></span>" list "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
$('.input').val($(this).text());
$('.add').html('Save')
});
$('.add').on('click', function() {
$('.add').html('Add');
})
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add">Add</button><button type="reset" class="reset">Clear</button>
<ul>
<li>
</li>
</ul>
</form>
</div> Комментарии:
1. почему вы говорите: «мне нужно поставить ID на li»?
2. Моя идея состоит в том, чтобы поместить ID в li и использовать data() , или есть другой способ?
Ответ №1:
Вы можете использовать index li то, что нажато, и сохранить его в некоторой переменной, и когда вы нажимаете на save кнопку, используйте это index , чтобы добавить значение к требуемому li .
Демонстрационный код :
// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'> </i></span>" list "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
var indexs;
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
indexs = $(this).index() //get index of li clicked
$('.input').val($(this).clone().children().remove().end().text().trim());
$('.add').html('Save')
});
$('.add').on('click', function() {
listState = 'add';
if ($(this).text() == "Save") {
//use index to add htmls
$("li:eq(" indexs ")").html("<span><i class='fa fa-trash-o'> </i></span>" $('.input').val())
$('.add').html('Add');
$('.input').val('')
}
})
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add" type="button">Add</button><button type="reset" class="reset">Clear</button>
<ul>
</ul>
</form>
</div> Другой способ — использовать атрибут data .Итак, всякий раз, когда вы li нажимаете, установите значение флага как true, а затем используйте этот атрибут data для сохранения значения required li .
Демонстрационный код :
// add button and remove
$(function() {
var listState = 'add';
$('.add').on('click', function() {
if (listState === 'add') {
let list = $('.input').val();
if (list !== '') {
$('ul').append("<li><span><i class='fa fa-trash-o'> </i></span>" list "</li>");
$('.input').val('');
$('ul').on('click', 'span', function() {
$(this).closest("li").fadeOut(500, function() {
$(this).remove();
$('.input').val('');
});
});
return false;
}
} else if (listState === 'edit') {
};
});
//save button
$(document).on('dblclick', 'li', function() {
listState = 'edit';
$('.input').val($(this).clone().children().remove().end().text().trim());
$(this).attr("data-edit", true); //add data attribute true
$("li").not($(this)).attr("data-edit", false); //other li to false
$('.add').html('Save')
});
$('.add').on('click', function() {
listState = 'add';
if ($(this).text() == "Save") {
$("[data-edit=true]").html("<span><i class='fa fa-trash-o'> </i></span>" $('.input').val()) //use same to add new content
$('.add').html('Add');
$('.input').val('')
}
})
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">)
<div class="container">
<h1>To Do List - Jquery</h1>
<p><em>Click and delete</em></p>
<form class="form">
<label>Enter a new task:</label>
<input class="input" type="text" placeholder="Enter your task">
<button class="add" type="button">Add</button><button type="reset" class="reset">Clear</button>
<ul>
</ul>
</form>
</div>