我已经看过这个问题的其他一些答案，但是我仍然无法正确完成它。我有两个无序列表。一个是从数据库表动态创建的。另一个只是一个开始为空的静态表。每个列表包含或将包含带有嵌套锚点和超酷字体图标元素的列表元素。我的目标是能够在单击图标时将列表元素从一个列表转移到另一个列表，同时将图标从加号更改为减号。到目前为止，我可以成功地将项目从动态列表转移到静态列表，并且可以更改图标，但是我不知道如何将它们转移回原始列表。
这是我的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));
});
任何帮助将不胜感激。谢谢！
好的，您可能需要为这些列表使用名称，目标是selectedColumns，源是无序列表，具有一些数据库生成的ID。我将一个类名source-list放到您的datbase生成的列表中。
我们可以使用此类名称作为源列表的公共选择器，并且由于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();
});
由于此代码有很多错误/错别字，因此我为此创建了一个小提琴，
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句