Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2019, 08:51
Новичок на форуме
Отправить личное сообщение для js123 Посмотреть профиль Найти все сообщения от js123
 
Регистрация: 02.07.2019
Сообщений: 4

Как сократить код?
Есть код пузырьковой сортировки(не полностью). Код сортирует цифры, работает если заданы цифры в определенном порядке :7, 6, 5, 4, 3, 2, 1. Если цифры поменять, код работает верно,но боксы(col,col1.....) перемещаются уже не так как надо. Как можно это исправить и возможно ли сократить код как-то? Используется библиотека jquery-3.4.1.js.

var arr = [7, 9, 5, 4, 3, 2, 1]; 
document.getElementById("demo7").innerHTML = "МАССИВ ЧИСЕЛ : " +arr; 
document.getElementById("demo").innerHTML = arr; 
document.getElementById("demo").innerHTML = arr[0];
document.getElementById("demo1").innerHTML = arr[1];
document.getElementById("demo2").innerHTML = arr[2];
document.getElementById("demo3").innerHTML = arr[3];
document.getElementById("demo4").innerHTML = arr[4];
document.getElementById("demo5").innerHTML = arr[5];
document.getElementById("demo6").innerHTML = arr[6];

function Animal() {
  function moveElement(arr, from, to) {
    arr.splice(to, 0, arr.splice(from, 1)[0]);
    return arr;  }
{if (arr[0] > arr[1] && arr[1] > arr[2] && arr[2] > arr[3] && arr[3] > arr[4] && arr[4] > arr[5] && arr[5] > arr[6] ) 
	document.getElementById("demo8").innerHTML = moveElement(arr,0,1); 
	document.getElementById("demo9").innerHTML = moveElement(arr,1,2);
	document.getElementById("demo10").innerHTML = moveElement(arr,2,3);
	document.getElementById("demo11").innerHTML = moveElement(arr,3,4);
	document.getElementById("demo12").innerHTML = moveElement(arr,4,5);
	document.getElementById("demo13").innerHTML = ' Первый шаг  '+moveElement(arr,5,6);
$( ".col1" ).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col2" ).delay(2500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col3" ).delay(5000).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col4" ).delay(7500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col5" ).delay(10000).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );
$( ".col6" ).delay(12500).animate({left: "-=60"}, 2500 ); 
$( ".col" ).animate({left: "+=60"}, 2500 );}

{if (arr[0] > arr[1]  ) 
	document.getElementById("demo14").innerHTML = moveElement(arr,0,1); 
if (arr[1] > arr[2] ) 	
	document.getElementById("demo15").innerHTML = moveElement(arr,1,2);
if (arr[2] > arr[3] ) 	
	document.getElementById("demo16").innerHTML = moveElement(arr,2,3);
if (arr[3] > arr[4] ) 	
	document.getElementById("demo17").innerHTML = moveElement(arr,3,4);
if (arr[4] > arr[5] ) 	
	document.getElementById("demo18").innerHTML = ' Второй шаг  '+moveElement(arr,4,5);

$( ".col2" ).delay(10500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(12500).animate({left: "+=60"}, 2500 );

$( ".col3" ).delay(11500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );

$( ".col4" ).delay(12500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );

$( ".col5" ).delay(15000).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );
$( ".col6" ).delay(17500).animate({left: "-=60"}, 2500 ); 
$( ".col1" ).delay(2000).animate({left: "+=60"}, 2500 );}

{if (arr[0] > arr[1]  ) 
	document.getElementById("demo19").innerHTML = moveElement(arr,0,1); 
if (arr[1] > arr[2] ) 	
	document.getElementById("demo20").innerHTML = moveElement(arr,1,2);
if (arr[2] > arr[3] ) 	
	document.getElementById("demo21").innerHTML = moveElement(arr,2,3);
if (arr[3] > arr[4] ) 	
	document.getElementById("demo22").innerHTML = ' Третий шаг  '+moveElement(arr,3,4);

$( ".col3" ).delay(14500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(17500).animate({left: "+=60"}, 2500 );	

$( ".col4" ).delay(16500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		

$( ".col5" ).delay(16500).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		
	
$( ".col6" ).delay(17000).animate({left: "-=60"}, 2500 ); 
$( ".col2" ).delay(2000).animate({left: "+=60"}, 2500 );		
}}
var animal = new Animal();
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2019, 09:43
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,516

Почитайте про циклы, с их помощью сократите код вдвое.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2019, 19:14
Новичок на форуме
Отправить личное сообщение для js123 Посмотреть профиль Найти все сообщения от js123
 
Регистрация: 02.07.2019
Сообщений: 4

Как тогда привязать анимацию, чтобы боксы перемещались верно, даже если цифры массива поменяются.
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2019, 07:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,792

Сообщение от js123
Как тогда привязать анимацию
Нет никакой разницы между N строк стоящими подряд и выполнением одной строки N раз в цикле.

Т.ч., если тебя устраивает работа твоего кода - устроит и работа циклов.
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2019, 08:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

и поубирай переопределения
document.getElementById("demo").innerHTML = arr;
document.getElementById("demo").innerHTML = arr[0];
ты их все равно не увидишь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как работает код с последовательностью скобок? AndriiS Общие вопросы Javascript 1 19.02.2019 15:18
как получить исходный код страницы после ajax lerneree AJAX и COMET 4 28.05.2018 13:53
Сократить код в 2 раза mr__brainwash jQuery 6 03.09.2014 16:52
Как вызвать свою функцию из «чужого» кода в Java Script, не переписывая «чужой» код? korobochkin Библиотеки/Тулкиты/Фреймворки 2 19.07.2014 15:17
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29