Question

我正在尝试构建两个列表，其中item可以从一个列表移动到另一个列表。我找到了this by searching。但是，我不需要多个选择和复选框。这就是为什么，我试图用自己的方式简化它。但是，由于我不擅长jQuery，我无法完全实现它。

我的示例代码：

<ul class="list-group source">
   <li class="list-group-item">Option 1</li>
   <li class="list-group-item">Option 2</li>
</ul>

<button class="add" disabled="disabled"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button class="remove" disabled="disabled"><i class="glyphicon glyphicon-chevron-left"></i></button>

<ul class="list-group destination">
</ul>

我男子气概想要两套东西：

（1）（a）当在源头没有选择任何项目时，保持“添加”按钮（用于将项目从源移动到目的地）被禁用。我已添加此代码无效：

var source = $('.source').children('.active');
    if(source.length > 0) {
        $(this).attr('disabled',false);
    } else {
        $(this).attr('disabled',true);
    };

（b）如果在目的地没有选择任何项目，则禁用“删除”按钮（用于将项目从目的地移动到源）。我写了类似上面的代码也没有用。

（2）（a）单击“添加”按钮时，将选定的源项目移动到目标。要做到这一点，我写了这样的东西，但我不知道我应该为移动项目写什么：

$('.add').click(function(){
    var item = $('.source').children('.active');
    // Move item from source to destination when one item is active/selected
    if(item.length > 0) {

    }
});

（b）单击“删除”按钮时，将所选目的地项目移动到源。要做到这一点，我必须做与以前相同的事情。

请帮助我成功完成这项工作。 Here is the fiddle work

Answer 1

我不确定这是不是你的意思但是你去了：http://jsfiddle.net/8xszm70d/4/

$('.list-group-item').click(function(){ 
    // add active class at list-item by click
    $(this).parent().find('.list-group-item').removeClass('active');
    $(this).addClass('active');

    // make add(>) button disabled untill selecting one
    var source = $(this).parents('.pick-list').find('.source').children('.active');
    if(source.length > 0) {
        $(this).attr('disabled',false);
        $('.add').attr('disabled',false);
    } else {
        $(this).attr('disabled',true);
        $('.add').attr('disabled',true);
    };

    // make remove(<) button disabled untill selecting one
    var des = $(this).parents('.pick-list').find('.destination').children('.active');
    if(des.length > 0) {
        $(this).attr('disabled',false);
        $('.remove').attr('disabled',false);
    } else {
        $(this).attr('disabled',true);
        $('.remove').attr('disabled',true);
    };
});

$('.add').click(function(){
    var item = $(this).parents('.pick-list').find('.source').children('.active');
    // Move item from source to destination when one item is active/selected
    if(item.length > 0) {
        $('.source .list-group-item.active').appendTo('.list-group.destination');
        $('.add').attr('disabled',true);
        $('.destination .list-group-item.active').removeClass('active');
    }
});

$('.remove').click(function(){
    var item = $(this).parents('.pick-list').find('.destination').children('.active');
    // Move item from destination to source when one item is active/selected
    if(item.length > 0) {
        $('.destination .list-group-item.active').appendTo('.source');
        $('.remove').attr('disabled',true);
        $('.source .list-group-item.active').removeClass('active');
    }
});

如何通过按钮单击将项目从一个列表移动到另一个列表

1 个答案: