所以，我在jQuery上并不擅长，而且我想在不同的事件中重用一些函数问题。
例如：我从一个“功能”框开始，但我有一个“+”按钮，它将使用jQuery添加其他框。
我在每个框下面有3个按钮（向上，向下和删除）来重新排序或删除框（使用jQuery .click（））
使用重新排序和删除功能，似乎我需要将它们都包含在“添加功能”jQuery点击事件中，以及它之外（对于静态初始功能）。每次添加，删除或重新排序功能时，我还想做一些其他事情（例如：禁用顶部“向上”箭头和向下“向下”箭头。）
所以我尝试了一些功能，似乎弄得一团糟。例如：如果我添加2个额外功能，然后删除功能2，则会调用删除对话两次。 Mo features = mo对话。向上和向下移动的相同问题，跳过各处！
我不明白如果没有这些副作用我可以拥有'可重复使用'的功能，有人能指出我正确的方向吗？
$(document).ready(function() {
function toggleFeatureArrows(){
var fCount = $(".featured-category").length;
$(".featured-category").each(function(i){
var x = i + 1;
if(x == 1){
$(this).find(".feature-up").addClass("disabled");
}
if(fCount > 1 && x > 1){
$(this).find(".feature-up").removeClass("disabled");
}
if(fCount > 1 && x < fCount){
$(this).find(".feature-down").removeClass("disabled");
}
if(x == fCount){
$(this).find(".feature-down").addClass("disabled");
}
});
}
function moveFeatures(){
$(".feature-up").click(function(){
console.log("Clicked up!");
var $current = $(this).closest('div.featured-category')
var $previous = $current.prev('div.featured-category');
if($previous.length !== 0){
$current.insertBefore($previous);
// switch orders
var currentOrder = $current.find('.feature-order').val();
var prevOrder = $previous.find('.feature-order').val();
$current.find('.feature-order').val(prevOrder);
$previous.find('.feature-order').val(currentOrder);
toggleFeatureArrows();
}
return false;
});
$(".feature-down").click(function(){
console.log("Clicked down!!");
var $current = $(this).closest('div.featured-category')
var $next = $current.next('div.featured-category');
if($next.length !== 0){
$current.insertAfter($next);
// switch orders
var currentOrder = $current.find('.feature-order').val();
var nextOrder = $next.find('.feature-order').val();
$current.find('.feature-order').val(nextOrder);
$next.find('.feature-order').val(currentOrder);
toggleFeatureArrows();
}
return false;
});
}
// Delete features
function deleteFeature(){
$(".feature-delete").click(function(){
console.log(" Deleting feature id: " + featureID);
if(confirm('Are you sure you want to delete this feature?')){
// get the feature id
var $current = $(this).closest('div.featured-category');
var featureID = $current.find(".feature-id").val();
if(featureID > 0){
// do some ajax
//
// if success remove current
$current.remove();
}
else {
$current.remove();
}
// reorder
$(".featured-category").each(function(i){
var x = i + 1;
$(this).find(".feature-order").val(x);
});
toggleFeatureArrows();
}
});
}
// Move features
moveFeatures();
// Delete features
deleteFeature();
// ADD FEATURED BLOCK
$("#addFeature").click(function(){
var fCount = $(".featured-category").length + 1;
var fContent = '<div class="featured-category"><div class="row"><div class="col-xs-2">F' + fCount + '</div><div class="col-xs-10">' +
'<input type="hidden" name="featured['+ (fCount - 1) +'][id]" class="feature-id" value="">' +
'<input type="text" name="featured['+ (fCount - 1) +'][order]" value="'+ fCount +'" class="feature-order"></div></div>' +
'<div class="row"><div class="col-xs-2">F' + fCount + ' Description</div><div class="col-xs-10"><textarea name="featured['+ (fCount - 1) +'][description]" rows="5" class="form-control"></textarea></div></div>' +
'<div class="row"><div class="col-xs-2"></div><div class="col-xs-10">' +
'<div class="alert alert-warning">' +
'<button type="button" class="btn btn-default btn-sm feature-delete" title="Delete"><i class="fa fa-trash"></i>delete</button> ' +
'<button type="button" class="btn btn-default btn-sm feature-up disabled" title="Move up"><i class="fa fa-arrow-up"></i>up</button> ' +
'<button type="button" class="btn btn-default btn-sm feature-down disabled" title="Move down"><i class="fa fa-arrow-down">down</i></button>' +
'</div></div></div><br>';
$("#features").append(fContent);
toggleFeatureArrows();
// Move features
moveFeatures();
// Delete function
deleteFeature();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="features">
<div class="row">
<div class="col-xs-2">Heading</div>
<div class="col-xs-10">
<input name="featured-heading" type="text" class="form-control" placeholder="Featured XXXXXX products" value="">
</div>
</div>
<div class="featured-category">
<div class="row">
<div class="col-xs-12"><hr></div>
</div>
<div class="row">
<div class="col-xs-2">F1</div>
<div class="col-xs-10">
<input type="hidden" name="featured[0][id]" value="" class="feature-id">
<input type="text" name="featured[0][order]" value="1" class="feature-order">
</div>
</div>
<div class="row">
<div class="col-xs-2">F1 Description</div>
<div class="col-xs-10">
<textarea name="featured[0][description]" id="" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-10">
<div class="alert alert-warning">
<button type="button" class="btn btn-default btn-sm feature-delete" title="Delete"><i class="fa fa-trash"></i>delete</button>
<button type="button" class="btn btn-default btn-sm feature-up disabled" title="Move up"><i class="fa fa-arrow-up"></i> up</button>
<button type="button" class="btn btn-default btn-sm feature-down disabled" title="Move down"><i class="fa fa-arrow-down"></i> down</button>
</div>
</div>
</div>
<br>
</div>
</div>
<button type="button" class="btn btn-success" id="addFeature">+</button>
`