javascript - 在 Jquery 中仅将列表记录添加到容器中一次

Question

我在顶部和底部有两个容器，

顶部容器最初不会有任何记录，我在单击按钮时将文本列表从底部容器添加到顶部容器，现在它工作正常，

但是目前我的场景中有一个小的变化，现在有多个记录正在添加到我的顶部容器中，我只想要一次没有多个/相同的列表记录应该出现在顶部容器中

例如，如果我下次将一条记录放在顶部容器中，即使我单击添加按钮，也不应将相同的列表记录添加到顶部容器中，要么在添加列表记录后禁用按钮，要么不允许重复记录在顶部容器中

有人帮我实现它谢谢!

https://jsfiddle.net/qx69o1bd/

html

<div>
<ol  id="sortable">

</ol>
</div>
 <br/>

<div>
        <ul id="draggable">
            <li>
                <div class="qitem">
                    <label class='lbl'>
                        Lance
                    </label>
                    <button class="hello" >Add To Top container</button>
                </div>
            </li>
            <li >
                <div class="qitem" >
                    <label>
                        Adam
                    </label>
                    <button class="hello" >Add To Top container</button>
                </div>
            </li>
            <li >
                <div class="qitem" >
                    <label>
                        Rickey
                    </label>
                    <button class="hello" >Add To Top container</button>
                </div>
            </li>
        </ul>
    </div>

JQuery

$(document).ready(function() {
    $("#sortable").sortable();
    $("button").click(function () {
        var label = $(this).prev().text();
        $("#sortable").append('<li>'+label+'</li>');
    });
});

Answer 1

只添加一个类来禁用和验证它。使用 css，您还可以为按钮设置样式。 https://jsfiddle.net/mig1098/qx69o1bd/4/

$(document).ready(function() {
    $("#sortable").sortable();
    $("button").click(function () {
        var label = $(this).prev().text();
        if(!$(this).hasClass('disabledbutton')){
          $("#sortable").append('<li>'+label+'</li>');
        }
        $(this).addClass('disabledbutton');
    });
});