Question

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

＆＃13;

  $(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>');
    });
});

＆＃13;

<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>

＆＃13;

Answer 1

问题是你在每个元素notes之后附加新内容，它有一个新的div notes。删除它或将名称更改为两个类别之一（或按照其他答案中的建议使用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

Answer 2

您正在选择类notes，然后添加具有相同类的新元素。因此，下次单击该按钮时，它会匹配原始项目和新项目。第三次按它时它会匹配两个，并添加2个duplcaites（每个后面一个）。

为添加的内容使用其他类，或使用:first或:last等内容在选择器中指定特定的类。

$(document).ready(function(){
    $("#button").click(function(){
        $(".notes:last").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>

Javascript保留重复的内容

2 个答案: