Сообщение об успехе не отображается после одного раза
Я пытаюсь показать сообщение при добавлении новой записи. При первом добавлении записи появляется сообщение. Но если я добавлю еще одну запись, сообщение не появится, хотя запись добавлена правильно.
Это мой HTML-код
<button id = "add">Add Name To Table</button>
<input type = "text" placeholder = "Enter Name" id = "name" style = "display: none;">
<input type = "text" placeholder = "Enter Class" id = "class" style = "display: none;">
<button id = "save" style = "display: none;">Add Name</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<span id = "message"></span>
<div id = "editdiv"></div>
Это мой код jquery
$(document).ready(function () {
var value;
var Nclass;
$('#add').click(function () {
$('#name').show();
$('#class').show();
$('#save').show();
});
$('#save').click(function () {
if ($('#name').val().length != "" && $('#class').val().length != "") {
value = $('#name').val().trim();
Nclass = $('#class').val().trim();
if (value != "") {
var cell = $('<td>').text(value);
var classval = $('<td>').text(Nclass);
var deletebtn = $('<button>').text('Delete').attr('class', 'delete');
var editbtn = $('<button>').text('Edit').attr('class', 'edit');
var row = $('<tr>').append(cell, classval, deletebtn, editbtn);
$('tbody').append(row);
row.hide().fadeIn();
$('#message').text("Data Added Successfully").css("color", "green");
setTimeout(function () {
$('#message').fadeOut();
}, 2000);
$('#name').val('');
$('#class').val('');
}
} else {
$('#message').text("You Cannot Submit While Input Fields Are Empty").css('color', 'red');
setTimeout(function () {
$('#message').fadeOut();
}, 2000);
}
});
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Сообщение не отображается во второй раз, потому что в первый раз был код, позволяющий его скрыть: $('#message').fadeOut(). Чтобы решить эту проблему, вызовите вызов .show() или .fadeIn() при отображении текста:
$('#message').text(".......").css('color', "....").fadeIn();
Чтобы сделать его более последовательным, вы можете скрыть элемент #message в исходном HTML. В этом случае эффект постепенного появления также сработает с первого раза.
Поскольку у вас есть два места, где вы показываете сообщение, включая вызов setTimeout, где вы снова скрываете сообщение, у вас есть возможность избежать повторения кода и ввести функцию, которая выполняет эту работу, например:
function notify(message, color) {
$('#message').text(message).css('color', color).show();
setTimeout(function () {
$('#message').fadeOut();
}, 2000);
}
Некоторые другие комментарии:
В документации jQuery рекомендуется использовать
$(function ()вместо$(document).ready(function () {.Присвойте переменным типа
valueиNclassнеобходимую им область действия (там, где они вам нужны). В настоящее время вы определили их на уровне функции обратного вызова, но они используются только в функции обратного вызова по щелчку, поэтому лучше определить их там.Используйте более современные ключевые слова
constилиletвместоvar. Они имеют блочную область действия и делаютvarненужным.Объединяйте селекторы jQuery, когда вы выполняете с ними одни и те же действия, например
$('#name, #class, #save').show();Поскольку вы хотите избежать добавления пустых строк, сначала обрежьте входные значения. В настоящее время ваш код позволяет добавлять
Nclassкак пустую строку (если вы введете несколько пробелов).Не сравнивайте так:
.length != "". Это сравнение числа со строкой работает так, как вы задумали, но более последовательно сравнивать либо входную строку с"", либо ее длину с 0. В этом случае вы можете даже просто проверить истинность (обрезанного) числа. введите строку и отбросьте оператор сравнения.Не начинайте имя переменной, например
Nclass, с заглавной буквы. Обычной практикой является резервирование имен PascalCase для конструкторов/классов и использование CamelCase для других имен переменных. Я бы посоветовалclassName.
$(function () { // Preferred way
$('#add').click(function () {
$('#name, #class, #save').show(); // Combine
});
$('#save').click(function () {
// Use const/let instead of var. Scope at the right level
// Perform trim first and then perform the IF
const value = $('#name').val().trim();
const className = $('#class').val().trim();
// Don't compare length (number) with a string. Just look at truthiness:
if (value && className) { // Simplified condition
// No nested IF
var cell = $('<td>').text(value);
var classval = $('<td>').text(className);
var deletebtn = $('<button>').text('Delete').attr('class', 'delete');
var editbtn = $('<button>').text('Edit').attr('class', 'edit');
var row = $('<tr>').append(cell, classval, deletebtn, editbtn);
$('tbody').append(row);
row.hide().fadeIn();
// Reuse code:
notify("Data Added Successfully", "green");
$('#name, #class').val(""); // Combine
} else {
// Reuse code:
notify("You Cannot Submit While Input Fields Are Empty", "red");
}
});
});
function notify(message, color) {
$('#message').text(message).css('color', color).fadeIn();
setTimeout(function () {
$('#message').fadeOut();
}, 2000);
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button id = "add">Add Name To Table</button>
<input type = "text" placeholder = "Enter Name" id = "name" style = "display: none;">
<input type = "text" placeholder = "Enter Class" id = "class" style = "display: none;">
<button id = "save" style = "display: none;">Add Name</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<span id = "message" style = "display:none"></span>
<div id = "editdiv"></div>Спасибо, сэр! Это решение не только решило мою проблему, но и научило меня более эффективному подходу к кодированию.@trincot
это потому, что FadeOut() добавляет CSS
display:noneповерх HTML, и вы никогда не вызываете его для удаления.