使用 JQuery 将列表元素从一个无序列表移动到另一个无序列表

Question

我已经查看了这个问题的其他一些答案，但我仍然无法正确完成它。我有两个无序列表。一种是从数据库表中动态创建的。另一个只是一个开始为空的静态表。每个列表都包含或将包含具有嵌套锚点和真棒字体图标元素的列表元素。我的目标是能够在单击图标后将列表元素从一个列表转移到另一个列表，同时将图标从加号更改为减号。到目前为止，我可以成功地将项目从动态列表转移到静态列表，并且可以更改图标，但我不知道如何将它们转移回原始列表。

这是我的html：

<div class="row" id="constructTable">
        <div class="col-md-6">
            <h1>Choose your Columns:</h1>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" id="heading1" role="tab">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed"><span style="font-size: 16px;">Candidate Data</span></a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height:0px;">
                        <ul class="list-group choose" id="candidate">
                            <li class="list-group-item" id="candidate0">
                                <a class="btn btn-sm btn-default">
                                    <i class="fa fa-lg fa-plus"></i>
                                </a>
                                <span style="font-size: 14px; margin-left:5px;">First Name</span>
                            </li>
                            <li class="list-group-item" id="candidate1">
                                <a class="btn btn-sm btn-default">
                                    <i class="fa fa-lg fa-plus"></i>
                                </a>
                                <span style="font-size: 14px; margin-left:5px;">Last Name</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <?php $counter = 2; ?>
            <?php foreach ($mergedTests as $test): ?>
                <?php $count=0 ?>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top:-10px;">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="heading<?php echo $counter; ?>" role="tab">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>" aria-expanded="false" aria-controls="collapse<?php echo $counter; ?>" class="collapsed">
                                <span style="font-size: 16px;"><?php if( ! $test->example ): ?><?php echo $test->example;  ?> Data<?php else: ?><?php echo $test->example; ?> Data<?php endif; ?></span>
                                </a>
                            </h4>
                        </div>
                    </div>
                    <?php $label = explode(",", $test->subtestLabel); ?>
                    <div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $counter; ?>" aria-expanded="false" style="height:0px;">
                        <ul class="list-group" id="<?php echo $test->subTestAbbreviation; ?>">
                            <?php if ( ! $test->testMakerTestId) : ?>
                                <?php foreach($label as $category): ?>
                                    <li class="list-group-item" id="<?php echo $test->example; ?><?php echo $count; ?>" >
                                        <a class="btn btn-sm btn-default">
                                            <i class="fa fa-lg fa-plus"></i>
                                        </a>
                                        <span  style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> <?php echo $category; ?></span>
                                    </li>
                                    <?php $count++; ?>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>0">
                                    <a class="btn btn-sm btn-default">
                                        <i class="fa fa-lg fa-plus"></i>
                                    </a>
                                    <span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Raw Score</span>
                                </li>
                                <li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>1">
                                    <a class="btn btn-sm btn-default">
                                        <i class="fa fa-lg fa-plus"></i>
                                    </a>
                                    <span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Percentile</span>
                                </li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
                <?php $counter++; ?>
            <?php endforeach; ?>
        </div>
        <div class="col-md-6">
            <h1>Arrange Your Columns:</h1>
            <ul class="list-group ui-sortable" id="selectedColumns">
            </ul>
        </div>
    </div>
</div>

到目前为止我的 JQuery 尝试：

$('li a').click(function(){
    var parentId = $(this).parent().attr('id');
    $(this).find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
    $("#selectedColumns").append($("#" + parentId));
});

//  Move selection from Arrange Your Columns back to Choose Your Columns
$('ul#selectedColumns').click(function(){
    var parentId = $(this).parent().attr("id");
    console.log(parentId);
    transferId = parentId.slice(0, -1);
    $("#" + parentId).find($(".fa")).removeClass('fa-minus').addClass('fa-plus');
    $("#" + transferId).append($("#" + parentId));
});

任何帮助将不胜感激。谢谢！

Answer 1

好的，您可能需要为这些列表使用名称，目标是 selectedColumns，源是无序列表，有一些数据库生成的 id。我会将一个类名 source-list 放入您的数据库生成的列表中。

我们可以使用这个类名作为源列表的通用选择器，并且由于 dom 会通过用户交互而改变，我们应该使用 .on 而不是 .click 绑定。

首先，我们将所选项目的克隆发送到 selectedColumns 并隐藏原始项目，这样我们就不必找到要回滚的元素的确切位置；

$(".source-list").on("li a","click", function(e) {
    // get id of element for further reference
    var itemId = $(this).attr("id");

    // clone the item to a variable
    var cloneItem = $(this).parent().clone();
    // change the appearence of cloned item
    cloneItem.find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
    // append cloned item to selectedColumns
    cloneItem.data("id", itemId).removeAttr('id').appendTo("#selectedColumns");
    // hide the original item
    $(this).hide();
});

$("#selectedColumns").on("li a","click", function(e) {
    var itemId = $(this).data("id");
    $(this).remove();
    $(itemId).show();
});

由于这段代码有很多错误/错别字，我为此创建了一个小提琴，

https://jsfiddle.net/wxsnagr9/7/

Answer 2

在我看来，您所拥有的大部分应该没问题，您应该只修复选择器（另外，使用事件委托可以让您无需绑定数据/重新检查父位置）：

$('#candidate').click('li a', function(){
    $(this).find(".fa").removeClass('fa-plus').addClass('fa-minus');
    $(this).parent().appendTo($("#selectedColumns"));
});


$('#selectedColumns').click('li a', function(){
    $(this).find(".fa").addClass('fa-plus').removeClass('fa-minus');
    $(this).parent().appendTo($("#candidate"));
});