我有多个 Select 下拉菜单，每个子菜单都有一个相应的输入字段.我try 做的是一个JS函数，它允许通过向上/向下点击图标来重新排序行.
我试图做的也是简单地为第一行只有一个向下图标，为最后一行只有一个向上图标，并为他们之间的所有其他东西都有向上和向下.发生的事情是，我有向上和向下为第一和第二行和向上为最后一行.
以下是我目前为止所拥有的代码
$(document).ready(function () {
function moveUp(index) {
if (index === 0) return;
var $currentItem = $('[name="status[' + index + ']"]').closest('.line');
var $prevItem = $('[name="status[' + (index - 1) + ']"]').closest('.line');
$currentItem.insertBefore($prevItem);
updateIconsVisibility();
}
function moveDown(index) {
var $currentItem = $('[name="status[' + index + ']"]').closest('.line');
var $nextItem = $('[name="status[' + (index + 1) + ']"]').closest('.line');
$nextItem.insertAfter($currentItem);
updateIconsVisibility();
}
function updateIconsVisibility() {
$('.line').each(function (index, element) {
var $line = $(element);
var $arrows = $line.find('.arrows');
var $upIcon = $arrows.find('.fa-chevron-circle-up');
var $downIcon = $arrows.find('.fa-chevron-circle-down');
if (index === 0) {
$upIcon.hide();
$downIcon.show();
} else if (index === $('.line').length - 1) {
$upIcon.show();
$downIcon.hide();
} else {
$upIcon.show();
$downIcon.show();
}
});
}
$(document).on('click', '.move-up-button', function() {
var index = $(this).data('index');
moveUp(index);
});
$(document).on('click', '.move-down-button', function() {
var index = $(this).data('index');
moveDown(index);
});
updateIconsVisibility();
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="mb-3" id="dropdown-container-edit">
<div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
<div style="float:left;display: flex; flex-direction: column;width: 10%;">
<label for="select-group" class="form-label">Select Status</label>
</div>
</div>
<div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
<div style="float:left;display: flex; flex-direction: column;width: 10%;">
<select class="select-group" name="status[0]">
<option value="" data-id="">Select Status</option>
<option value="0" data-id="" selected>Status_1</option>
<option value="1" data-id="" >Status_2</option>
<option value="2" data-id="" >Status_3</option>
</select>
</div>
<div style="float:left; display: flex; flex-direction: column; width: 90%;">
<input type="text" class="input-field status-input" name="status-input[0]" style="margin-left: 5px;" value="status_1">
</div>
<div class="arrows" style="display: inherit;margin-left: 10px;margin-top: 3px; ">
<i class="fa fa-chevron-circle-up fa-2x move-up-button" data-index="0" style="margin-right: 5px;"></i>
<i class="fa fa-chevron-circle-down fa-2x move-down-button" data-index="0"></i>
</div>
</div>
<div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
<div style="float:left;display: flex; flex-direction: column;width: 10%;">
<select class="select-group" name="status[1]">
<option value="" data-id="">Select Status</option>
<option value="0" data-id="" >Status_1</option>
<option value="1" data-id="" selected>Status_2</option>
<option value="2" data-id="" >Status_3</option>
</select>
</div>
<div style="float:left; display: flex; flex-direction: column; width: 90%;">
<input type="text" class="input-field status-input" name="status-input[1]" style="margin-left: 5px;" value="status_2">
</div>
<div class="arrows" style="display: inherit;margin-left: 10px;margin-top: 3px; ">
<i class="fa fa-chevron-circle-up fa-2x move-up-button" data-index="1" style="margin-right: 5px;"></i>
<i class="fa fa-chevron-circle-down fa-2x move-down-button" data-index="1"></i>
</div>
</div>
<div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
<div style="float:left;display: flex; flex-direction: column;width: 10%;">
<select class="select-group" name="status[2]">
<option value="" data-id="">Select Status</option>
<option value="0" data-id="" >Status_1</option>
<option value="1" data-id="" >Status_2</option>
<option value="2" data-id="" selected>Status_3</option>
</select>
</div>
<div style="float:left; display: flex; flex-direction: column; width: 90%;">
<input type="text" class="input-field status-input" name="status-input[2]" style="margin-left: 5px;" value="status_3">
</div>
<div class="arrows" style="display: inherit;margin-left: 10px;margin-top: 3px; ">
<i class="fa fa-chevron-circle-up fa-2x move-up-button" data-index="2" style="margin-right: 5px;"></i>
<i class="fa fa-chevron-circle-down fa-2x move-down-button" data-index="2"></i>
</div>
</div>
</div>如果需要这里也是JSFiddle:https://jsfiddle.net/tm51dkra/2/