Question

我想修改下面的代码，以便在追加后selected_users仍然是唯一的。也就是说，只有当selected_users 不已经包含U时，我们才会将用户U附加到selected_users。

您可以复制和粘贴以下代码，它将起作用。所有依赖项都在cdns上。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>


    <style>
        div { width : 200px }
        .selected { background-color:blue; }
    </style>
<script>

    $(document).ready(function() {
      $("#add").on("click", function() {
         var users = $("#users > p.selected");
         var selected_users = $("#selected_users");

         selected_users.append(users.clone().removeClass("selected"));

      });

      $("#remove").on("click", function() {
         var selected_users = $("#selected_users > p");
         selected_users.remove();
      });

      $("p").click(function() {
        if( $(this).hasClass("selected") ) {
            $(this).removeClass("selected");
        }
        else {
            $(this).addClass("selected");
        }
      });

    });
</script>
</head>

<div id="users">
    <p class="1">User 1</p>
    <p class="2">User 2</p>
    <p class="3">User 3</p>
    <p class="4">User 4</p>
    <p class="5">User 5</p>
</div>


<div>
<input type="button" value=">>" id="add"/>
<input type="button" value="<<" id="remove"/>            
</div>

<div id="selected_users">

</div>

Answer 1

这样的表单通常会在将项目添加到目标列表时从源列表中删除该项目。

这种行为会阻止进行检查，因为无法将副本添加到selected_users列表中。

您的代码看起来像这样选择/取消选择用户：

$("#add").on("click", function() {
    var users = $("#users > p.selected");
    var selected_users = $("#selected_users");

    selected_users.append(users.clone().removeClass("selected"));
    users.remove();
});

$("#remove").on("click", function() {
    var selected_users = $("#selected_users > p");
    var users = $("#users");

    users.append(selected_users.clone());
    selected_users.remove();
});

注意：我尚未测试上述代码。

如果您想维护每个列表中的用户顺序，可以在添加到列表时对任一列表进行排序，或者您可以维护每个用户的visibility属性而不是实际删除/从任一列表中添加它们。

Answer 2

你可以这样做：

$("#add").on("click", function()
{
    var users = $("#users > p.selected");
    var selected_users = $("#selected_users");
    if(!selected_users.find(users).lenght())
    {
        selected_users.append(users.clone().removeClass("selected"));
    }
 });

Answer 3

简单的解决方案是从左侧的列表中删除。

如果你不想这样做。试试这个。我们的想法是指定ID以便能够检查。

$("#add").on("click", function() {
    var users = $("#users > p.selected");

    users.uniqueId();//assigns unique id if they don't have one
    //you can do above step somewhere else also for performance reasons

    var selected_users = $("#selected_users");


    selected_users.append(users.clone().removeClass("selected"));

    users.each(function(user) {
         var id = user.attr('id');
         var exists = $("#selected_users > [selectedid="+id+"]);
         if (! exists || exists.length <= 0 ) {
                  selected_users.append(
                      user.removeClass("selected").
                      removeAttr("id").
                      attr('selectedid',id));
         } 

    });

});

当我附加到列表时如何防止重复？

3 个答案: