成功消息一次后未显示

Question

我试图在添加新记录时显示一条消息。第一次添加记录时，会出现该消息。但是，如果我添加另一条记录，即使记录已正确添加，该消息也不会显示。

这是我的 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);
            }
        });

    });

Answer 1

该消息第二次不会显示，因为第一次有代码隐藏它：

$('#message').fadeOut()

。要解决此问题，请在显示文本时链接

.show()

或

.fadeIn()

调用：

$('#message').text(".......").css('color', "....").fadeIn();

为了使其更加一致，您可以隐藏初始 HTML 中的

#message

元素。在这种情况下，淡入效果也会在第一次起作用。

由于您有两个地方显示消息，包括再次隐藏消息的

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();

• 由于您想避免添加空字符串，请确保first修剪输入值。目前，您的代码允许添加

  Nclass

  作为空字符串（如果您输入一些空格）。

• 不要这样比较：

  .length != ""

  。数字与字符串的比较恰好按照您的预期进行，但将输入字符串与

  ""

  或其长度与 0 进行比较会更加一致。在这种情况下，您甚至可以只测试 ( 的真实性修剪）输入字符串并删除比较运算符。

• 不要像

  Nclass

  这样的变量名以大写开头。通常的做法是为构造函数/类保留 PascalCase 命名，并为其他变量名称使用驼峰式命名。我建议

  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>

Answer 2

这是因为 fadeOut() 在 HTML 上添加了 CSS

display:none

，而你永远不会调用来删除它。

更好的版本可以对 fadIn 和 fadeOut 执行相同操作

$(document).ready(function() {
  $('#add').click(function() {
    $('#name').show();
    $('#class').show();
    $('#save').show();
  });
  $('#save').click(function() {

    if ($.trim($('#name').val()) == '' || $.trim($('#class').val()) == '') {
      $('#message').text("You Cannot Submit While Input Fields Are Empty").css('color', 'red').fadeIn(800).fadeOut(800);
    }

    var cell = $('<td>').text($.trim($('#name').val()));
    var classval = $('<td>').text($.trim($('#class').val()));
    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);
    $('#message').text("Data Added Successfully").css("color", "green").fadeIn(800).fadeOut(800);
    $('#name').val('');
    $('#class').val('');
  });

});

<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"></span>
<div id="editdiv"></div>