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

Adding List records into container only once in Jquery

本文关键字：一次 添加 Jquery 列表 记录      更新时间：2023-09-26

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

顶部容器

最初它将没有记录，我正在单击按钮时将文本列表从底部容器添加到顶部容器，到目前为止它工作正常，

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

例如，假设我下次在顶部容器中

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

有人帮助我实现它谢谢！

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>

杰奎里

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

仅添加一个类来禁用和验证它。使用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');
    });
});

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

这将检查是否已经有一个包含名称的元素，如果有，则不允许用户再次添加它！

如果使用 one 方法将侦听器附加到 click 事件，则该按钮将仅运行侦听器一次(每个按钮应用选择器(： 

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

如果您希望实际禁用按钮，可以通过在对象上设置 disabled 属性来执行此操作：

$("button").one('click', function () {
    var label = $(this).prev().text();
    $("#sortable").append('<li>'+label+'</li>');
    $(this).attr('disabled', true');
});
相关文章：