构建错误列表

Building an error list

本文关键字：列表 错误 构建      更新时间：2023-09-26

我正在构建一个错误列表。单击提交按钮时，将删除旧错误并添加新错误。以下代码是我正在使用的代码，但它不断添加新错误而不删除旧错误：(我的 JS 小提琴在这里：http://jsfiddle.net/shapeare/bc1bdq1b/(

<div id="error">
    Below is a list of errors:
</div>
<input id="submitBtn" type="submit" value="submit"/>
$(document).ready(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').innerHTML = '';
        $('#error').append('<p>Error ' +  $index  +  '</p>');
        $index ++; 
    });
});

我想要实现的是，每次单击按钮时，旧错误都会消失并发生新错误。例如，第一次单击提交按钮时，将显示"错误 0"。第二次单击时，"错误 0"消失并显示"错误 1"。

您正在设置innerHTML它不是jQuery的属性，而是本机DOM。而是使用清空$('#error')的empty。其他选项包括.text('')和.html('') 

$(document).ready(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').empty().append('<p>Error ' +  $index  +  '</p>');
        $index++; 
    }); 
});

演示 你也可以使用索引器来获取本机元素，然后设置innerHTML但是为什么不使用jQuery在使用时提供的东西呢？

试试这个 

$(function(){
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error p').hide("slow");
        $('#error p').html("");
        $('#error p').html('<p>Error ' +  $index  +  '</p>');
        $('#error p').show("slow");
        $index ++; 
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="error">
    Below is a list of errors:
    <p></p>
</div>
<input id="submitBtn" type="submit" value="submit"/>

您可以像这样替换 html，而不是追加：

$(document).ready(function(){ 
    $index = 0;
    $(document).on('click', '#submitBtn', function(event) {
        $('#error').html('<p>Error ' +  $index  +  '</p>');
        $index ++; 
    });
});
相关文章：