Задать вопрос
@ArutaGerman

Как менять нумерацию блоков?

Есть страница, на которой строки меняются местами с соседними строками при нажатии на кнопку вверх/вниз
5d21d97e9e83f986482979.png

В каждой из этих строк имеется порядковый номер строки.
Скрипт на jQuery написал, чтобы строки менялись местами, написал, чтобы строка 1 принимала значение строки 2 (порядковый номер) при перемещении, но не получается при этом, чтобы строка 2 принимала номер 1, т.к. выполнение последовательное происходит и вторая строка вообще стирает значение номера.
В итоге получается, что строка 2 имеет порядковый номер 2 и данные блока 1, а строка 1 вообще без номера становится.

Помогите, пожалуйста. Весь день сижу с этой проблемой.

p.s. скрипт нужен не для константных вручную прописанных id=1, id=2, а чтобы автоматически определись id перемещаемых блоков и менялись в них порядковые номера, т.к. строк может быть 2, а может быть и 50 и id каждого прописывать вручную в код - не комильфо. Логику понимаю как должно работать, а как написать это не получается никак

Код html:
<div id="order-1" class="order__wrap dflex">
	<div class="order__half dflex">
		<div class="order__nav dflex">
			<div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
				....	
			</div>				
			<div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
				....
			</div>
		</div>
		<div class="order_position">
			<span id="position1">1)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
		</div>
		<div class="order__data">
			...
		</div>
	</div>
</div>
<div id="order-2" class="order__wrap dflex">
	<div class="order__half dflex">
		<div class="order__nav dflex">
			<div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
				....	
			</div>				
			<div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
				....
			</div>
		</div>
		<div class="order_position">
			<span id="position2">2)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
		</div>
		<div class="order__data">
			...
		</div>
	</div>
</div>


Код на jquery (меняет местами order-1 и order-2, но полностью, без смены порядкового номера id="position1):

$(function() {
    var images = $('order__wrap');
    
    $('.nav__triangle-up').click(function() {
        var currentBlock = $(this).parent().parent().parent();
        var prevBlock = currentBlock.prev();
        swap(currentBlock, prevBlock);
        return false;
    });
    
    $('.nav__triangle-down').click(function() {
        var currentBlock = $(this).parent().parent().parent();
        var nextBlock = currentBlock.next();
        swap(nextBlock, currentBlock);
        return false;
    });
});

function swap(a, b) {
	var up = $('.nav__triangle-up');
    if (a.size() > 0 && b.size() > 0) {
        a.insertBefore(b);
    }
}
  • Вопрос задан
  • 238 просмотров
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ответы на вопрос 1
Получаешь id на кликнутого элемента. Если нажали наверх, сделай обработчик, что минусовала id. При этом если нажали наверх, то ты передаешь допустим предыдущий элемент через .prev() и плюсуешь id. Потом делаешь перемещение элемента, не вдавался как правильно делать перемещение, давно такими штуками занимался на jquery https://ruseller.com/lessons.php?id=673. Вот ссылка.
И все. Аналогичном образом делаешь и с кнопкой вверх, только там используй next() функцию. Тебе еще нужно будет делать проверку, допустим если при нажатие предыдущего элемента нет, то не перемещать, но лучше сделать заранее скрытие кнопки. Примерно такая структура
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы