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

Question

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

这是我的 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。我会将 class 名称源列表放入您的数据库生成的列表中。

我们可以使用此 class 名称作为源列表的通用选择器，并且由于 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();
});

由于这段代码有很多错误/打字错误，我为此创建了一个 fiddle，

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

Answer 2

在我看来，你所拥有的大部分都应该没问题，你应该只修复选择器（另外，使用事件委托将使你无需绑定 data/recheck 父位置）：

$('#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"));
});

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

Moving list element from one unordered list to another with JQuery

html

javascript

jquery

javascript-events