Question

我正在构建错误列表。单击提交按钮时，将删除旧错误并添加新错误。以下代码是我正在使用的，但它不断添加新错误而不删除旧错误:(我的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 ++; 
    });
});

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

Answer 1

试试这个

$(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"/>

Answer 2

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

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

DEMO您也可以使用索引器获取本机元素，然后设置innerHTML，但为什么不使用jQuery在使用时提供的内容？

Answer 3

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

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

构建错误列表

3 个答案: