JavaScript 保留重复的内容

Question

所以我想做一个简单的笔记系统。每次按下添加按钮时，都会弹出一个新注释，但它会不断复制内容。这意味着我从 1 个音符开始，添加 1 个音符，再次单击，然后有 4 个音符，再次单击，现在是 8 个。

  $(document).ready(function(){
    $("#button").click(function(){
        $(".notes").after('<div class="notes"><div class=container><div class="card"><div class="card-image waves-effect waves-block waves-light"><img class="activator" src="images/keyboard.jpg"></div><div class="card-content"><span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span></div><div class="card-reveal"><span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span><p>Here is some more information about this product that is only revealed once clicked on.</p></div></div></div></div>');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Click me</button>
<div class="notes">
    <div class="container">
        <div class="card">
            <div class="card-image waves-effect waves-block waves-light">
                <img class="activator" src="images/keyboard.jpg">
            </div>
            <div class="card-content">
                <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
            </div>
            <div class="card-reveal">
                <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                <p>Here is some more information about this product that is only revealed once clicked on.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

问题是您在每个带有类 notes 的元素后面附加新内容，其中有一个带有类 notes 的新 div。删除它或将名称更改为两个类之一(或按照其他答案中的建议使用 last() )。

所以一开始你有这样的:

<div class="notes">...</div>

单击按钮一次后，您会看到类似的内容:

<div class="notes">...</div>
<div class="notes">...</div>

现在，如果您再次单击该按钮，jQuery 将在每个注释类之后附加新注释:

<div class="notes">...</div>
<div class="notes">...</div>  <-- New note
<div class="notes">...</div>
<div class="notes">...</div>  <-- New note