我已经看过这个问题的其他一些答案，但我仍然无法正确完成。我有两个无序列表。一个是从数据库表动态创建的。另一个只是一个从空开始的静态表。每个列表包含或将包含具有嵌套锚点和awesome-font图标元素的列表元素。我的目标是能够在单击图标时将列表元素从一个列表传输到另一个列表，同时将图标从加号更改为减号。到目前为止，我可以成功地将项目从动态列表传输到静态列表，我可以更改图标，但我无法弄清楚如何将它们传回原始列表。
这是我的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));
});
非常感谢任何帮助。谢谢！
答案 0 :(得分：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();
});
由于此代码有很多错误/拼写错误，我为此创建了一个小提琴，
答案 1 :(得分：0)
在我看来，你所拥有的应该是最好的，你应该只修复选择器（同样，使用事件委托将使你无需绑定数据/重新检查父位置）：
$('#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"));
});