【发布时间】：2017-08-25 12:52:00
【问题描述】：
每次用户在表格的一行中选择一个复选框并单击保存时，它都会生成一个容器，该容器将以特定格式保存该选定行的数据。
注意：表格中的数据来自 JSON。
同样，用户也可以选择通过表单手动将数据添加到同一个容器中。
现在，我将所有这些容器或数据持有者都附加到 dom 中的父容器中。
我需要交换这些数据容器中的每一个，我目前已经实现了这一点。 但是，第一个容器和最后一个容器的按钮不会被禁用或隐藏。
这是我的脚本
<script>
function getData(){
$('input[name="articles"]:checked').map(function() {
var content = JSON.parse(decodeURIComponent(this.value));
content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
});
$('.remove').click(function(){
$(this).parents('.parent').remove();
});
resetEvents();
}
function addName(){
var name= $("#articleTitle").val();
content +='<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+Count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete <span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
$('.box').html(content);
$('.removeArticle').click(function(){
$(this).parents('.parent').remove();
});
}
function handleEvents() {
$(".top-btn, .down-btn").prop("disabled", false).show();
$(".parent:first").find(".top-btn").prop("disabled", true).hide();
$(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
function resetEvents() {
$(".top-btn, .down-btn").unbind('click');
handleEvents();
$('.down-btn').click(function() {
var toMove1 = $(this).parents('.article-box');
$(toMove1).insertAfter($(toMove1).next());
handleEvents();
});
$('.top-btn').click(function() {
var toMove1 = $(this).parents('.article-box');
$(toMove1).insertBefore($(toMove1).prev());
handleEvents();
});
}
</script>
第一个数据持有者将没有顶部的数据持有者可以交换。因此，顶部按钮应该被禁用或隐藏。
同样，最后一个数据持有者不会有向下的数据持有者可以交换。因此，向下按钮应该被禁用或隐藏。
我无法理解我写的内容有什么问题？
注意：如果我使用硬编码的数据持有者而不是在运行时生成它，这将非常有效。
【问题讨论】：
-
使用委托事件而不是默认事件。